Run
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Grid System Complete Example</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .grid-box { background-color: #f8f9fa; border: 1px solid #dee2e6; text-align: center; padding: 20px; font-size: 1.1rem; color: #495057; } .highlight { background-color: #e9ecef; } </style> </head> <body> <!-- Header --> <header class="bg-primary text-white text-center py-4 mb-5"> <h1>Bootstrap 5 Grid System Example</h1> <p class="lead">Learn and master the grid system with this example</p> </header> <!-- Container --> <div class="container"> <!-- Basic Grid System --> <section class="mb-5"> <h2 class="mb-3">1. Basic Grid System</h2> <div class="row"> <div class="col grid-box">Column 1</div> <div class="col grid-box">Column 2</div> <div class="col grid-box">Column 3</div> </div> </section> <!-- Responsive Columns --> <section class="mb-5"> <h2 class="mb-3">2. Responsive Columns</h2> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-4 grid-box">Responsive 1</div> <div class="col-sm-12 col-md-6 col-lg-4 grid-box">Responsive 2</div> <div class="col-sm-12 col-md-6 col-lg-4 grid-box">Responsive 3</div> </div> </section> <!-- Gutter Spacing --> <section class="mb-5"> <h2 class="mb-3">3. Gutter Spacing</h2> <div class="row g-3"> <div class="col-md-4 grid-box">Gutter 1</div> <div class="col-md-4 grid-box">Gutter 2</div> <div class="col-md-4 grid-box">Gutter 3</div> </div> </section> <!-- Nested Grid --> <section class="mb-5"> <h2 class="mb-3">4. Nested Grid</h2> <div class="row"> <div class="col-md-6 grid-box"> Parent Column <div class="row mt-3"> <div class="col-6 grid-box highlight">Nested 1</div> <div class="col-6 grid-box highlight">Nested 2</div> </div> </div> <div class="col-md-6 grid-box">Parent Column</div> </div> </section> <!-- Alignment Options --> <section class="mb-5"> <h2 class="mb-3">5. Alignment Options</h2> <div class="row align-items-center" style="height: 200px; background: #e9ecef;"> <div class="col grid-box">Align Center</div> <div class="col grid-box">Align Center</div> <div class="col grid-box">Align Center</div> </div> </section> <!-- Order Classes --> <section class="mb-5"> <h2 class="mb-3">6. Responsive Order Classes</h2> <div class="row"> <div class="col-md-4 order-3 order-md-1 grid-box">First in Desktop</div> <div class="col-md-4 order-1 order-md-2 grid-box">Second in Desktop</div> <div class="col-md-4 order-2 order-md-3 grid-box">Third in Desktop</div> </div> </section> <!-- Full-Width Container --> <section class="mb-5"> <h2 class="mb-3">7. Full-Width Layout with Fluid Container</h2> <div class="container-fluid"> <div class="row"> <div class="col-md-4 grid-box">Fluid 1</div> <div class="col-md-4 grid-box">Fluid 2</div> <div class="col-md-4 grid-box">Fluid 3</div> </div> </div> </section> </div> <!-- Footer --> <footer class="bg-dark text-white text-center py-3"> <p>Made with Bootstrap 5.3</p> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Go to
Tutorialdeep Homepage