Bootstrap 5 Framework

Bootstrap Layout Components

13 min Lesson 9 of 40

Bootstrap Layout Components

Beyond the grid system, Bootstrap provides powerful layout components that help structure entire pages. Let's explore containers, breakpoints in practice, z-index layering, and layout best practices.

1. Container Variations

Containers are the foundation of Bootstrap layouts. Choose the right container for your needs:

<!-- Fixed-width container (responsive breakpoints) -->
<div class="container">
    <!-- Width changes at breakpoints:
         sm (540px), md (720px), lg (960px), xl (1140px), xxl (1320px)
    -->
    <p>Fixed-width responsive container</p>
</div>

<!-- Full-width container -->
<div class="container-fluid">
    <!-- Always 100% width at all breakpoints -->
    <p>Full-width fluid container</p>
</div>

<!-- Responsive containers (100% until breakpoint) -->
<div class="container-sm">100% wide until sm breakpoint (576px)</div>
<div class="container-md">100% wide until md breakpoint (768px)</div>
<div class="container-lg">100% wide until lg breakpoint (992px)</div>
<div class="container-xl">100% wide until xl breakpoint (1200px)</div>
<div class="container-xxl">100% wide until xxl breakpoint (1400px)</div>

<!-- Practical example: Combining containers -->
<!-- Full-width header -->
<header class="bg-dark text-white">
    <div class="container">
        <nav class="navbar">
            <span class="navbar-brand">My Site</span>
        </nav>
    </div>
</header>

<!-- Full-width hero with centered content -->
<section class="bg-primary text-white py-5">
    <div class="container">
        <h1 class="display-3">Welcome</h1>
        <p class="lead">Hero section content</p>
    </div>
</section>

<!-- Standard content area -->
<main class="container my-5">
    <div class="row">
        <div class="col-lg-8">
            <article>Main content</article>
        </div>
        <div class="col-lg-4">
            <aside>Sidebar</aside>
        </div>
    </div>
</main>

<!-- Full-width footer -->
<footer class="bg-dark text-white py-4">
    <div class="container">
        <p class="mb-0">© 2024 My Site</p>
    </div>
</footer>
        

Container Max-Widths:

sm (≥576px): 540px
md (≥768px): 720px
lg (≥992px): 960px
xl (≥1200px): 1140px
xxl (≥1400px): 1320px

2. Columns and Auto-Layout

Master advanced column techniques for flexible layouts:

<!-- Auto-width columns -->
<div class="row">
    <div class="col">
        Equal width column (shares available space)
    </div>
    <div class="col">
        Equal width column (shares available space)
    </div>
    <div class="col">
        Equal width column (shares available space)
    </div>
</div>

<!-- Mixed: specific width + auto-width -->
<div class="row">
    <div class="col-6">
        Fixed 50% width
    </div>
    <div class="col">
        Auto-width (fills remaining 50%)
    </div>
</div>

<!-- Content-based width -->
<div class="row">
    <div class="col-auto">
        Width based on content (doesn't grow)
    </div>
    <div class="col">
        Takes remaining space
    </div>
</div>

<!-- Practical: Form layout -->
<form>
    <div class="row g-3">
        <div class="col-md-6">
            <label for="firstName" class="form-label">First Name</label>
            <input type="text" class="form-control" id="firstName">
        </div>
        <div class="col-md-6">
            <label for="lastName" class="form-label">Last Name</label>
            <input type="text" class="form-control" id="lastName">
        </div>
        <div class="col-12">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email">
        </div>
        <div class="col-md-8">
            <label for="address" class="form-label">Address</label>
            <input type="text" class="form-control" id="address">
        </div>
        <div class="col-md-4">
            <label for="zip" class="form-label">Zip</label>
            <input type="text" class="form-control" id="zip">
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

<!-- Practical: Navigation with auto-layout -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <!-- Logo: content-based width -->
        <a class="navbar-brand" href="#">Logo</a>

        <!-- Spacer: takes remaining space -->
        <div class="flex-grow-1"></div>

        <!-- Nav items: content-based width -->
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>
        

Column Width Tips:

Use col when you want equal-width columns
Use col-auto when content should determine width
Use col-{number} when you need specific widths
Mix them together for flexible, maintainable layouts

3. Responsive Breakpoints in Practice

Real-world examples of breakpoint usage:

<!-- Example 1: E-commerce Product Page -->
<div class="container">
    <div class="row g-4">
        <!-- Product images: Full width on mobile, 60% on desktop -->
        <div class="col-12 col-lg-7">
            <img src="product.jpg" class="img-fluid" alt="Product">
            <!-- Thumbnail gallery -->
            <div class="row row-cols-4 g-2 mt-2">
                <div class="col"><img src="thumb1.jpg" class="img-fluid" alt="Thumb"></div>
                <div class="col"><img src="thumb2.jpg" class="img-fluid" alt="Thumb"></div>
                <div class="col"><img src="thumb3.jpg" class="img-fluid" alt="Thumb"></div>
                <div class="col"><img src="thumb4.jpg" class="img-fluid" alt="Thumb"></div>
            </div>
        </div>

        <!-- Product details: Full width on mobile, 40% on desktop -->
        <div class="col-12 col-lg-5">
            <h1 class="h3">Product Name</h1>
            <p class="text-muted">SKU: 12345</p>
            <h2 class="h4 text-primary">$99.99</h2>
            <p>Product description goes here...</p>

            <!-- Options -->
            <div class="mb-3">
                <label class="form-label">Size</label>
                <select class="form-select">
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                </select>
            </div>

            <!-- Buttons: Stack on mobile, side-by-side on tablet+ -->
            <div class="row g-2">
                <div class="col-12 col-sm-6">
                    <button class="btn btn-primary w-100">Add to Cart</button>
                </div>
                <div class="col-12 col-sm-6">
                    <button class="btn btn-outline-secondary w-100">Wishlist</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Example 2: Blog Archive -->
<div class="container">
    <div class="row g-4">
        <!-- Main content: Full width on mobile, 8 cols on desktop -->
        <main class="col-12 col-lg-8">
            <!-- Blog posts grid: 1 col mobile, 2 cols tablet+ -->
            <div class="row row-cols-1 row-cols-md-2 g-4">
                <div class="col">
                    <article class="card h-100">
                        <img src="post1.jpg" class="card-img-top" alt="Post">
                        <div class="card-body">
                            <h5 class="card-title">Post Title</h5>
                            <p class="card-text">Post excerpt...</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </article>
                </div>
                <!-- More posts... -->
            </div>
        </main>

        <!-- Sidebar: Full width on mobile, 4 cols on desktop -->
        <aside class="col-12 col-lg-4">
            <!-- Search -->
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">Search</h5>
                    <input type="search" class="form-control" placeholder="Search...">
                </div>
            </div>

            <!-- Categories -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Categories</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Technology</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Business</a></li>
                    </ul>
                </div>
            </div>
        </aside>
    </div>
</div>

<!-- Example 3: Admin Dashboard -->
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar: Hidden on mobile (toggle), visible on tablet+ -->
        <aside class="col-md-3 col-lg-2 d-none d-md-block bg-light">
            <div class="sidebar-sticky">
                <nav class="nav flex-column">
                    <a class="nav-link active" href="#">Dashboard</a>
                    <a class="nav-link" href="#">Users</a>
                    <a class="nav-link" href="#">Reports</a>
                </nav>
            </div>
        </aside>

        <!-- Main content: Full width on mobile, adjusts for sidebar on tablet+ -->
        <main class="col-md-9 col-lg-10 px-md-4">
            <!-- Stats: 1 col mobile, 2 cols tablet, 4 cols desktop -->
            <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h6>Total Sales</h6>
                            <h3>$12,345</h3>
                        </div>
                    </div>
                </div>
                <!-- More stats... -->
            </div>
        </main>
    </div>
</div>
        

4. Z-Index and Stacking Context

Control layering of elements with z-index utilities:

<!-- Bootstrap z-index utilities -->
<div class="position-relative">
    <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-25">
        Background layer (default z-index)
    </div>

    <div class="position-absolute top-50 start-50 translate-middle z-1">
        Middle layer (z-index: 1)
    </div>

    <div class="position-absolute bottom-0 end-0 z-2">
        Top layer (z-index: 2)
    </div>

    <div class="position-absolute top-0 end-0 z-3">
        Highest layer (z-index: 3)
    </div>
</div>

<!-- Practical: Modal overlay -->
<div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 z-2">
    <!-- Overlay backdrop -->
</div>

<div class="position-fixed top-50 start-50 translate-middle z-3 bg-white p-4 rounded">
    <!-- Modal content above overlay -->
    <h3>Modal Title</h3>
    <p>Modal content</p>
</div>

<!-- Practical: Fixed navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <!-- Fixed navbar automatically has high z-index -->
    <div class="container">
        <a class="navbar-brand" href="#">Site Name</a>
    </div>
</nav>

<!-- Practical: Notification badge -->
<button class="btn btn-primary position-relative">
    Messages
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
    </span>
</button>

<!-- Practical: Image with overlay text -->
<div class="position-relative">
    <img src="hero.jpg" class="img-fluid" alt="Hero">
    <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white bg-dark bg-opacity-50">
        <h2>Overlay Title</h2>
        <p>Overlay description</p>
    </div>
</div>
        

Z-Index Classes:

z-n1 - z-index: -1
z-0 - z-index: 0
z-1 - z-index: 1
z-2 - z-index: 2
z-3 - z-index: 3

Note: Bootstrap components (navbar, dropdown, modal, tooltip, popover) have predefined z-index values (1000+) to ensure proper layering.

5. Layout Best Practices

Proven strategies for building maintainable layouts:

<!-- Best Practice 1: Semantic HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Layout</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Use semantic tags -->
    <header>
        <nav class="navbar navbar-expand-lg">...</nav>
    </header>

    <main>
        <section class="hero">...</section>
        <section class="features">...</section>
        <article class="blog-post">...</article>
    </main>

    <aside class="sidebar">...</aside>

    <footer>...</footer>
</body>
</html>

<!-- Best Practice 2: Consistent spacing -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Section Title</h2>
        <div class="row g-4">
            <!-- Use consistent spacing throughout -->
        </div>
    </div>
</section>

<!-- Best Practice 3: Mobile-first responsive -->
<div class="row">
    <!-- Start with mobile layout -->
    <div class="col-12 col-md-6 col-lg-4">
        Mobile: full width
        Tablet: half width
        Desktop: one-third width
    </div>
</div>

<!-- Best Practice 4: Accessible navigation -->
<nav class="navbar" aria-label="Main navigation">
    <button class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#" aria-current="page">Home</a>
            </li>
        </ul>
    </div>
</nav>

<!-- Best Practice 5: Performance optimization -->
<!-- Lazy load images below the fold -->
<img src="image.jpg"
     class="img-fluid"
     loading="lazy"
     alt="Description">

<!-- Use srcset for responsive images -->
<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     class="img-fluid"
     alt="Responsive image">

<!-- Best Practice 6: Reusable components -->
<!-- Define reusable card component -->
<div class="card h-100">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body d-flex flex-column">
        <h5 class="card-title">Title</h5>
        <p class="card-text flex-grow-1">Content</p>
        <a href="#" class="btn btn-primary mt-auto">Action</a>
    </div>
</div>
        

6. Complete Page Layout Example

Putting it all together - a complete, production-ready page layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Layout</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <style>
        body { min-height: 100vh; display: flex; flex-direction: column; }
        main { flex: 1; }
    </style>
</head>
<body>
    <!-- Fixed top navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main content -->
    <main>
        <!-- Hero section -->
        <section class="bg-primary text-white py-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <h1 class="display-4">Welcome to Our Site</h1>
                        <p class="lead">Build amazing things with Bootstrap 5</p>
                        <button class="btn btn-light btn-lg">Get Started</button>
                    </div>
                    <div class="col-lg-6 d-none d-lg-block">
                        <img src="hero-image.jpg" class="img-fluid" alt="Hero">
                    </div>
                </div>
            </div>
        </section>

        <!-- Features section -->
        <section class="py-5">
            <div class="container">
                <h2 class="text-center mb-5">Features</h2>
                <div class="row row-cols-1 row-cols-md-3 g-4">
                    <div class="col">
                        <div class="card h-100 text-center">
                            <div class="card-body">
                                <div class="display-4 text-primary mb-3">🚀</div>
                                <h5 class="card-title">Fast</h5>
                                <p class="card-text">Lightning fast performance</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100 text-center">
                            <div class="card-body">
                                <div class="display-4 text-primary mb-3">📱</div>
                                <h5 class="card-title">Responsive</h5>
                                <p class="card-text">Works on all devices</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100 text-center">
                            <div class="card-body">
                                <div class="display-4 text-primary mb-3">🎨</div>
                                <h5 class="card-title">Beautiful</h5>
                                <p class="card-text">Modern design</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA section -->
        <section class="bg-light py-5">
            <div class="container text-center">
                <h2 class="mb-4">Ready to Get Started?</h2>
                <p class="lead mb-4">Join thousands of satisfied customers</p>
                <button class="btn btn-primary btn-lg">Sign Up Now</button>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p class="mb-0">© 2024 Company Name. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <a href="#" class="text-white text-decoration-none me-3">Privacy</a>
                    <a href="#" class="text-white text-decoration-none me-3">Terms</a>
                    <a href="#" class="text-white text-decoration-none">Contact</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="bootstrap.bundle.min.js"></script>
</body>
</html>
        

Common Layout Pitfalls:

Forgetting to close containers, rows, or columns properly
Nesting containers inside containers (not recommended)
Using too many nested rows (keep it simple)
Not testing on real devices (mobile, tablet, desktop)
Hardcoding heights instead of letting content flow naturally
Overusing fixed positioning (can cause mobile issues)
Not considering accessibility (keyboard navigation, screen readers)

Final Project: Complete Website

Create a complete multi-page website with these requirements:

Page 1: Homepage

Sticky navigation with logo and menu
Hero section with background image and CTA
Features section (3-4 feature cards)
Testimonials carousel
Newsletter signup form
Footer with multiple columns

Page 2: About Page

Page header with breadcrumb navigation
Two-column layout (content + sidebar)
Team member grid
Company timeline

Page 3: Contact Page

Contact form with validation styling
Location map (placeholder)
Contact information cards

Requirements:

Use appropriate container types throughout
Implement proper responsive breakpoints
Apply consistent spacing using Bootstrap utilities
Use semantic HTML5 elements
Ensure all images are responsive
Add appropriate z-index for overlays
Test on mobile (375px), tablet (768px), and desktop (1200px+)
Include proper ARIA labels for accessibility
Optimize for performance (lazy loading, etc.)

Layout Mastery Checklist:

✓ Use the right container for each section
✓ Start mobile-first, enhance for larger screens
✓ Keep nesting simple (2-3 levels max)
✓ Use consistent spacing throughout
✓ Test all responsive breakpoints
✓ Validate HTML and check accessibility
✓ Optimize images and use lazy loading
✓ Use semantic HTML elements
✓ Document complex layouts with comments
✓ Keep CSS organized and maintainable

Congratulations! You've completed Module 2: Grid System Advanced. You now have a solid understanding of:

Grid alignment and ordering
Complex nested grids
Grid utilities and customization
Responsive design patterns
Bootstrap layout components

In the next module, we'll dive into Bootstrap's component library and learn how to build interactive UI elements!