Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Margin</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> body{ padding:15px; } .container div{ background: #000; border:1px solid #ccc; color: #fff; } </style> </head> <body> <div class="container"> <h1>Bootstrap 4 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="ml-5">Margin on start (left/right based on text direction) (<code>ml-5</code>)</div> <div class="mr-auto">Margin on end (auto) (<code>mr-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> <!-- Responsive Margins --> <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> <!-- Negative Margins --> <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> </div> </body> </html>
Go to
Tutorialdeep Homepage