Home > Courses > Bootstrap > Layout & The Grid System

Layout & The Grid System

Subject: Bootstrap
Bootstrap's grid system is built with Flexbox and allows up to 12 columns across the page. It is fully responsive, meaning columns automatically rearrange and resize depending on the screen size.

Key Concepts to Remember


1. The 12-Column Rule: Each row is divided into 12 equal sections. When creating columns, the numbers you assign should ideally add up to 12 or less per row.
2. Rows and Columns: always wrap columns inside a .row class AND use .col classes inside rows to define individual sections.
3. Responsive Breakpoints: Bootstrap uses 6 tiers to control layouts across different screen sizes:
(a) .col- (Extra small devices: < 576px)
(b) .col-sm- (Small devices: ≥ 576px)
(c) .col-md- (Medium devices / Tablets: ≥ 768px)
(d) .col-lg- (Large devices / Desktops: ≥ 992px)
(e) .col-xl- (Extra large devices: ≥ 1200px)
(f) .col-xxl- (Extra extra large devices: ≥ 1400px)

Code Example


Here is an example showing how to create responsive columns that stack on mobile phones and sit side-by-side on larger screens (adding up to 12):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Grid Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-5">
        <h1>Bootstrap 5 Grid Example</h1>
        <p class="text-muted">Resize the browser window to see the responsive behavior.</p>

        <!-- A row containing three columns that sum up to 12 (4 + 4 + 4) on small screens and up -->
        <div class="row text-white text-center">
            <div class="col-sm-4 bg-primary p-3 border">Column 1 (col-sm-4)</div>
            <div class="col-sm-4 bg-secondary p-3 border">Column 2 (col-sm-4)</div>
            <div class="col-sm-4 bg-success p-3 border">Column 3 (col-sm-4)</div>
        </div>
    </div>

    <!-- Bootstrap 5 JavaScript Bundle CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>










By: Benjamin Onuorah

Comments

No Comment yet!

Login to comment or ask question on this topic

Previous Topic Next Topic