Bootstrap: More About Grids & Components

Topics Covered in This Web Development Tutorial:

Advanced grid nesting techniques, Bootstrap component integration (navbar & responsive elements), and responsive visibility controls for modern web interfaces

Exercise Preview

Photos courtesy of istockphoto, Hakan Çaglav, Image #14393929, Renee Keith, Image #7827478.

Exercise Overview

In this comprehensive exercise, you'll master Bootstrap's advanced grid system and explore how components work together to create professional, responsive layouts. We'll cover nested grids—a powerful technique for creating complex layouts within existing grid structures—and implement Bootstrap's navbar component with responsive behavior. You'll also learn to control element visibility across different screen sizes, a crucial skill for modern responsive design.

Getting Started

This exercise builds upon the foundation from our previous lesson, but we'll start fresh to ensure a clean working environment for the new concepts we're introducing.

1. In your code editor, close any files you may have open to start with a clean workspace.
2. Navigate to the Bootstrap More Grids folder located in Desktop > Class Files > yourname-Flexbox Grid Class. If your code editor supports project folders, open this entire directory for easier file management.
3. Open index.html from the Bootstrap More Grids folder.

4. Preview index.html in a browser to see our starting point.

   • This page mirrors what you created in the previous exercise—a solid foundation for our advanced techniques.
   • Our goal is to enhance this layout by adding a heading below the main photo and creating a responsive grid of additional images.

5. Keep the browser preview open as you work—this allows for real-time testing of your changes, a best practice in modern web development.

Nesting Grids

Grid nesting is one of Bootstrap's most powerful features, allowing you to create sophisticated layouts by placing new grid systems inside existing columns. This technique is essential for building complex, professional interfaces.

1. Switch to your code editor to begin implementing nested grids.

2. Below the image in the left column, add a heading that will introduce our upcoming content:

   <div class="row">
      <div class="col-lg-8 col-xl-9">
         <img src="img/large-low-lustre.jpg">
         <h1>Upcoming Shows</h1>
      </div>

3. Now we'll create a nested grid structure. Add a new row container below the heading:

   <div class="row">
      <div class="col-lg-8 col-xl-9">
         <img src="img/large-low-lustre.jpg">
         <h1>Upcoming Shows</h1>
         <div class="row"></div>
      </div>

4. Inside this nested row, create the first column with a placeholder image. This demonstrates how nested grids inherit the full width of their parent column:

   <h1>Upcoming Shows</h1>
   <div class="row">
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
   </div>

5. Duplicate this column structure to create a three-column layout. Notice how Bootstrap's flexbox foundation automatically distributes space evenly:

   <h1>Upcoming Shows</h1>
   <div class="row">
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
   </div>

6. Save the file and reload the page in your browser to see the nested grid in action.

   • Observe how the three images arrange themselves in a single row within the larger column structure—this is nested grid behavior at work.
7. Return to index.html in your code editor to continue building.

8. Add a fourth column to demonstrate Bootstrap's flexible column system:

   <div class="row">
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
      <div class="col">
         <img src="img/small-plastic-brain.jpg">
      </div>
   </div>

9. Save and reload to see the automatic reflow to four equal columns.

   • This demonstrates Bootstrap's intelligent flexbox implementation—columns automatically adjust their width based on the number of siblings.
   • Now let's replace these placeholder elements with realistic content including different images and show information.
10. Switch back to your code editor to integrate the prepared content.
11. Open upcoming-shows.html from the snippets folder to access the pre-built show data.
12. Select and copy all the code from this file.
13. Close the snippet file and return to index.html.

14. Select the entire block of four placeholder columns:

    <div class="col">
       <img src="img/small-plastic-brain.jpg">
    </div>

    Code Omitted To Save Space

    <div class="col">
       <img src="img/small-plastic-brain.jpg">
    </div>

15. Replace the selected placeholder code with the copied show data.

16. Save and refresh your browser to see the enhanced content.

    • You now have four distinct show listings with unique images and detailed information. Notice the subtle styling on dates and prices—this uses Bootstrap's text-muted class for visual hierarchy.
    • While this four-column layout works well on desktop, mobile users would struggle with such narrow columns. Let's implement responsive breakpoints to optimize the experience across all devices.
17. Return to your code editor to add responsive behavior.

18. Apply responsive column classes to create an optimal viewing experience at different screen sizes:

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-low-lustre.jpg">

    Code Omitted To Save Space

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-juliette.jpg">

    Code Omitted To Save Space

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-plastic-brain.jpg">

    Code Omitted To Save Space

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-dusty-shoes.jpg">

19. Save and test the responsive behavior in your browser.

    • This creates a progressive layout: single column on mobile (xs), two columns on small tablets (sm), and four columns on extra-large screens (xl). This approach prioritizes readability across all device types.
    • The images could benefit from better scaling behavior. Bootstrap provides utility classes to handle this common need.
20. Switch back to your code editor for image optimization.

21. Add Bootstrap's width utility class to make images responsive within their containers:

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-low-lustre.jpg" class="w-100">

    Code Omitted To Save Space

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-juliette.jpg" class="w-100">

    Code Omitted To Save Space

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-plastic-brain.jpg" class="w-100">

    Code Omitted To Save Space

    <div class="col-sm-6 col-xl-3">
       <img src="img/small-dusty-shoes.jpg" class="w-100">

22. Save and test the improved image scaling.

    • Resize your browser window to observe how images now properly fill their containers at all screen sizes, providing a polished, professional appearance.
    • Let's enhance the user interface by styling the ticket links as proper call-to-action buttons.
23. Return to your code editor for button styling.

24. Transform the plain ticket links into styled buttons using Bootstrap's button component classes:

    <a href="#" class="btn btn-primary">Tickets</a>

    NOTE: Bootstrap offers extensive button variations including btn-secondary, btn-success, btn-warning, btn-danger, and btn-outline variants. Explore the complete button documentation at getbootstrap.com/docs/5.3/components/buttons for advanced styling options.

25. Save and reload to see the enhanced call-to-action buttons in place of plain text links.

Showing & Hiding Elements at Specific Sizes

Responsive visibility control is crucial for creating optimal user experiences across devices. Bootstrap's display utilities allow you to show or hide elements based on screen size, helping you prioritize content for different viewing contexts.

1. Switch back to your code editor to implement responsive visibility.

2. Hide the large hero image on smaller screens where it might overwhelm the limited viewport space:

   <img class="d-none d-lg-block" src="img/large-low-lustre.jpg">
   <h1>Upcoming Shows</h1>

   NOTE: The d-none class sets display to none across all screen sizes, while d-lg-block overrides this behavior on large screens and above, showing the image as a block element. This pattern gives you precise control over content visibility.

3. Save and test the responsive image behavior.

   • The large image now intelligently appears only when there's sufficient screen space to display it effectively, while smaller screens focus user attention on the upcoming shows content.

Adding a Navbar

Professional websites require intuitive navigation. Bootstrap's navbar component provides a robust, responsive navigation solution that adapts beautifully to different screen sizes. We'll implement a complete navbar with modern best practices.

1. Begin by accessing the pre-built navbar code. Switch to your code editor and open navbar.html from the snippets folder.

   NOTE: This navbar code follows Bootstrap's official patterns found at getbootstrap.com/docs/5.3/components/navbar. In production projects, starting with Bootstrap's documented examples ensures compatibility and accessibility compliance.

2. Copy all the navbar code from the snippet file.
3. Close the snippet file and return to index.html.

4. Integrate the navbar at the top of your page structure, immediately after the body tag:

   <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">

   Code Omitted To Save Space

   </nav>
      <div class="container">
         <div class="row">

5. The navbar's responsive collapse functionality requires JavaScript. Add Bootstrap's JavaScript library before the closing body tag:

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

6. Save and test the navbar functionality.

   • Resize your browser window to see the responsive behavior in action. On smaller screens, the navbar collapses into a hamburger menu icon (the three horizontal lines that resemble a hamburger).
   • Click the hamburger icon to expand and collapse the mobile menu—this interaction is powered by Bootstrap's JavaScript component.
7. Now we'll customize the navbar content to match our site. Switch back to your code editor.

8. Replace the placeholder brand name with your site's identity:

   <div class="container-fluid">
      <a class="navbar-brand" href="#">The Jive Factory</a>

9. Update the navigation links to reflect your site's actual pages:

   <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
         <a class="nav-link active" aria-current="page" href="#">Shows</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Menu</a>
      </li>

10. Clean up the navbar by removing unnecessary elements. The navbar contains four list items—keep only the first two (Shows and Menu) and delete the dropdown and disabled link items:

    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
       <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Shows</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" href="#">Menu</a>
       </li>
    </ul>

11. Add a third navigation item by duplicating the Menu list item:

    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
       <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Shows</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" href="#">Menu</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" href="#">Menu</a>
       </li>
    </ul>

12. Update the duplicated item with appropriate content:

    <li class="nav-item">
       <a class="nav-link" href="#">Menu</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" href="#">About Us</a>
    </li>

13. Remove the search form element entirely as it's not needed for this navigation design.

14. Test the current navbar behavior and adjust the responsive breakpoint for better mobile optimization:

    • Save and reload to see your customized navbar in action.
    • Notice that the hamburger menu appears even when there's sufficient space for the three navigation items. Let's optimize this.

15. Adjust the collapse breakpoint to show navigation items on more screen sizes:

    <body>
       <nav class="navbar-expand-sm navbar-light bg-light">

16. Save and test the improved responsive behavior—the hamburger menu now appears only on truly small screens.

    • This provides a better user experience by showing the full navigation whenever possible.
17. Now let's apply a modern dark theme to the navbar. Switch back to your code editor.

18. Transform the navbar to use Bootstrap's dark styling:

    <nav class="navbar-expand-sm navbar-dark bg-dark">

19. Save and preview the dark navbar styling.

    • The navbar now features a sophisticated dark gray appearance that's popular in modern web design.
    • Let's improve the navigation layout by repositioning the links for better visual balance.
20. Return to your code editor for layout adjustments.

21. Move the navigation links to the right side of the navbar for a more polished appearance:

    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

22. Simplify the margin classes to clean up the spacing:

    <ul class="navbar-nav ms-auto">

23. Test the right-aligned navigation on wide screens—this creates better visual balance in the header area.

24. Let's add a professional sticky navigation behavior. Switch back to your code editor.

25. Make the navbar stick to the top of the viewport during scrolling:

    <nav class="navbar-expand-sm navbar-dark bg-dark sticky-top">

26. Save and test the sticky navigation behavior.

    • Scroll down the page to see the navbar remain fixed at the top—this keeps navigation accessible at all times, a crucial usability feature for modern websites.
    • You might notice that the navbar content extends to the browser edges while the page content has constrained width. Let's align these elements for visual consistency.
27. Return to your code editor for final layout refinements.

28. Align the navbar content with the page layout by constraining its width:

    <nav class="navbar-expand-sm navbar-dark bg-dark sticky-top">
       <div class="container">

29. Save and evaluate the final navbar implementation.

    • The navbar content now aligns perfectly with your page columns, creating a cohesive, professional layout.
    • This demonstrates the power of Bootstrap's component system—you've created a fully functional, responsive navigation bar using only HTML classes and minimal JavaScript, achieving professional results without custom CSS.