<title>Bootstrap 5 Margin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<h1>Bootstrap 5 Margin</h1>
<div class="m-3">Margin on all sides (<code>m-3</code>)</div>
<div class="mt-4">Margin on top (<code>mt-4</code>)</div>
<div class="mb-2">Margin on bottom (<code>mb-2</code>)</div>
<div class="ms-5">Margin on start (left/right based on text direction) (<code>ms-5</code>)</div>
<div class="me-auto">Margin on end (auto) (<code>me-auto</code>)</div>
<div class="mx-2">Horizontal margin (<code>mx-2</code>)</div>
<div class="my-1">Vertical margin (<code>my-1</code>)</div>
<div class="m-md-4">Responsive margin for medium screens (<code>m-md-4</code>)</div>
<div class="mt-sm-2 mb-lg-5">Top margin for small screens and bottom margin for large screens (<code>mt-sm-2 mb-lg-5</code>)</div>
<div class="m-n1">Negative margin of 0.25rem on all sides (<code>m-n1</code>)</div>
<div class="mt-n2">Negative margin of 0.5rem on top (<code>mt-n2</code>)</div>