Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Padding</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 Padding</h1> <div class="p-3">Padding on all sides (<code>p-3</code>)</div> <div class="pt-4">Padding on top (<code>pt-4</code>)</div> <div class="pb-2">Padding on bottom (<code>pb-2</code>)</div> <div class="pl-5">Padding on start (left/right based on text direction) (<code>pl-5</code>)</div> <div class="pr-2">Padding on end (<code>pr-2</code>)</div> <div class="px-3">Horizontal padding (<code>px-3</code>)</div> <div class="py-1">Vertical padding (<code>py-1</code>)</div> <!-- Responsive Paddings --> <div class="p-md-4">Responsive padding for medium screens (<code>p-md-4</code>)</div> <div class="pt-sm-2 mb-lg-5">Top padding for small screens and bottom padding for large screens (<code>pt-sm-2 mb-lg-5</code>)</div> </div> </body> </html>
Go to
Tutorialdeep Homepage