Bootstrap: Controlling Grids & Layout

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Mastering Bootstrap's responsive grid system through strategic breakpoint manipulation and element visibility controls—essential skills for creating professional, mobile-first web experiences.

Exercise Preview

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

Exercise Overview

In this hands-on exercise, you'll master Bootstrap's grid system by implementing responsive breakpoints that create optimal user experiences across all device sizes. You'll learn to strategically control content layout and visibility, ensuring your design adapts intelligently from mobile phones to large desktop displays. This approach reflects current industry best practices for responsive design in 2026.

1. If you completed the previous exercises (5C–6A), you can proceed directly to step 2. We strongly recommend completing those foundational exercises first, as they establish the necessary Bootstrap structure and components you'll be refining here.

   Exercise Prerequisites

   This tutorial builds on previous exercises 5C-6A. If you haven't completed them, follow the setup instructions to download the Bootstrap More Elements & Nesting Grids Done folder and rename it to Bootstrap.

Changing the Grid at Specific Sizes

Now we'll implement Bootstrap's responsive grid classes to create layouts that adapt intelligently to different screen sizes. This technique is fundamental to modern web development, where users access content across an increasingly diverse range of devices.

1. Return to your code editor to begin implementing the responsive grid modifications.

2. Open index.html if it's not already active in your editor.

3. Locate the four-column section starting around line 41. Here's the critical concept: Bootstrap's grid system operates on a 12-column foundation with four distinct breakpoints. Currently, your divs use col-sm-3, which creates four columns (3×4=12) starting at 768px screen width. However, this creates uncomfortably narrow columns on medium-sized devices like tablets in landscape orientation.

   The solution is implementing a two-tier approach: use col-sm-6 to create a comfortable two-column layout (6+6=12) on medium screens, with the remaining content flowing naturally to a second row.

4. Update each column's class from col-sm-3 to col-sm-6 as shown below:

   <div class="col-sm-6">
      <img class="img-thumbnail" src="img/thumb-low-lustre.jpg">
      <h3>Low Lustre</h3>

   Code Omitted To Save Space

   </div>
   <div class="col-sm-6">
      <img class="img-thumbnail" src="img/thumb-juliette.jpg">
      <h3>Juliette</h3>

   Code Omitted To Save Space

   </div>
   <div class="col-sm-6">
      <img class="img-thumbnail" src="img/thumb-plastic-brain.jpg">
      <h3>Plastic Brain</h3>

   Code Omitted To Save Space

   </div>
   <div class="col-sm-6">
      <img class="img-thumbnail" src="img/thumb-dusty-shoes.jpg">
      <h3>Dusty Shoes</h3>

5. Save and test index.html in your browser. Resize from mobile to tablet sizes and observe how the layout now gracefully transitions from single-column (mobile) to two-column (tablet) layouts. This creates much more readable content at medium screen sizes, but we can optimize further for large desktop displays.
6. Return to your code editor to implement the final responsive breakpoint.

7. For large screens (1200px and wider), we'll restore the four-column layout where the generous screen space can accommodate it effectively. Add the col-lg-3 class to each div, creating a comprehensive responsive strategy:

   <div class="col-sm-6 col-lg-3">
      <img class="img-thumbnail" src="img/thumb-low-lustre.jpg">
      <h3>Low Lustre</h3>

   Code Omitted To Save Space

   </div>
   <div class="col-sm-6 col-lg-3">
      <img class="img-thumbnail" src="img/thumb-juliette.jpg">
      <h3>Juliette</h3>

   Code Omitted To Save Space

   </div>
   <div class="col-sm-6 col-lg-3">
      <img class="img-thumbnail" src="img/thumb-plastic-brain.jpg">
      <h3>Plastic Brain</h3>

   Code Omitted To Save Space

   </div>
   <div class="col-sm-6 col-lg-3">
      <img class="img-thumbnail" src="img/thumb-dusty-shoes.jpg">
      <h3>Dusty Shoes</h3>

8. Save and thoroughly test index.html across all screen sizes. You should now see a perfectly orchestrated responsive progression:

   • Mobile (extra small): Single column for optimal readability on small screens

   • Tablet (small/medium): Two columns providing balanced content density

   • Desktop (large): Four columns maximizing the available screen real estate

   • However, you may notice that on large screens, the main content area proportions could be further optimized for better visual balance.

9. Switch back to index.html in your code editor to refine the main content area proportions.

10. Locate the main content container around line 38:

    <div class="col-sm-8">

11. Add responsive width control that provides more generous spacing on large screens:

    <div class="col-sm-8 col-lg-9">

    This creates an 8-column width on medium screens (sm) and expands to 9 columns on large screens (lg), giving the main content more breathing room where screen space permits.

12. Find the sidebar container around line 76:

    <div class="col-sm-4">

13. Apply the corresponding adjustment to maintain Bootstrap's 12-column total:

    <div class="col-sm-4 col-lg-3">

14. Refresh index.html in your browser and test the layout at different screen sizes. On large displays, you'll now see improved content proportions with the main area receiving more space (9 columns) and the sidebar becoming more focused (3 columns). This creates better visual hierarchy and reading experience.

    This demonstrates Bootstrap's power—you've created a sophisticated, multi-breakpoint responsive layout without writing a single line of custom CSS media queries. This approach scales efficiently across projects and maintains consistency with Bootstrap's ecosystem.

Showing & Hiding Elements at Specific Sizes

Strategic content visibility control is crucial for mobile-first design. Not every element that works well on desktop adds value on mobile devices. Let's implement Bootstrap's visibility classes to create more focused user experiences across device types.

1. The slideshow placeholder becomes ineffective on mobile devices due to size constraints and bandwidth considerations. Let's hide it on extra-small screens using Bootstrap's hidden-xs class. In your code editor, locate line 39 and add the visibility control:

   <img src="img/slideshow-low-lustre.jpg" class="hidden-xs">

   This approach follows mobile-first UX principles by removing elements that don't contribute to the mobile user experience.

2. Save and test index.html in your browser. As you shrink the window below 768px, the slideshow disappears, creating more focused mobile content. However, this reveals another layout issue—the horizontal rule below the slideshow now creates unnecessary visual separation.

3. Apply the same visibility class to the orphaned horizontal rule:

   <img src="img/slideshow-low-lustre.jpg" class="hidden-xs">
   <hr class="hidden-xs">

   This maintains visual coherence across breakpoints by removing elements that lose context when related content is hidden.

4. Mobile users need better content separation in the single-column layout. We'll add dividers that only appear on extra-small screens using the visible-xs class. Add horizontal rules after each show's ticket button:

   <div class="row">
      <div class="col-sm-6 col-lg-3">
         <img class="img-thumbnail" src="img/thumb-low-lustre.jpg">

   Code Omitted To Save Space

   <a href="#" class="btn-default">Tickets</a>
         <hr class="visible-xs">
      </div>
      <div class="col-sm-6 col-lg-3">
         <img class="img-thumbnail" src="img/thumb-juliette.jpg">

   Code Omitted To Save Space

   <a href="#" class="btn-default">Tickets</a>
         <hr class="visible-xs">
      </div>
      <div class="col-sm-6 col-lg-3">
         <img class="img-thumbnail" src="img/thumb-plastic-brain.jpg">

   Code Omitted To Save Space

   <a href="#" class="btn-default">Tickets</a>
         <hr class="visible-xs">
      </div>
      <div class="col-sm-6 col-lg-3">
         <img class="img-thumbnail" src="img/thumb-dusty-shoes.jpg">

   Code Omitted To Save Space

   <a href="#" class="btn-default">Tickets</a>
         <hr class="visible-xs">
      </div>
   </div>

5. Save and test the mobile layout in your browser. Resize to under 768px width and notice the subtle divider lines that now separate each show, improving content scannability in the single-column mobile layout.

Refining the Layout

While our layout works well at Bootstrap's defined breakpoints, there's an intermediate screen size that needs attention. Between mobile phone width and tablet size, there's an opportunity to optimize the design further. This level of refinement separates professional implementations from basic responsive layouts.

1. Switch to main.css in your code editor to implement custom breakpoint styling.

2. Create a custom media query that targets the gap between mobile and tablet breakpoints:

   @media (min-width: 371px) and (max-width: 767px) {
   
   }

   The 371px minimum is calculated precisely: image width (330px) + Bootstrap's img-thumbnail padding (4px × 2) + border (1px × 2) + column padding (15px × 2) + 1px buffer = 371px. This mathematical approach ensures pixel-perfect responsive behavior.

3. Within this media query, optimize the image layout for better space utilization:

   @media (min-width: 371px) and (max-width: 767px) {
      .img-thumbnail {
         float: right;
         width: 40%;
         margin: 10px 0 20px;
      }
   }

   This creates an elegant text-wrap effect where content flows around the image, maximizing readability in the intermediate screen size range.

4. Save the file and test across multiple screen sizes.

5. Test index.html thoroughly across the responsive spectrum:

   • Above 768px: Images display full-width within their columns

   • 371-767px: Images float right at 40% width with text wrapping elegantly alongside

   • Below 371px: Full-width stacked layout for optimal mobile reading

   • You may notice that floated images occasionally interfere with the horizontal dividers. We need to implement proper float clearing.

6. Return to main.css to fix the float interaction issue.

7. Add a float-clearing rule for the mobile dividers:

   hr.visible-xs {
      clear: both;
   }

   This ensures that horizontal rules always start below any floated content, maintaining clean visual separation.

8. Save and test the layout improvements.

9. During testing, you'll notice that the two-column tablet layout needs better vertical spacing. The ticket buttons appear too close to the content below them, creating visual crowding. We'll add targeted spacing using a custom class approach.

10. Switch to index.html and add a semantic class to the upcoming shows container.

11. Locate the row container around line 41 and add a descriptive class:

    <hr class="hidden-xs">
    <div class="upcoming-shows row">
       <div class="col-sm-6 col-lg-3">

    This semantic approach makes your CSS more maintainable and allows for targeted styling without affecting other page elements.

12. Save the file and return to main.css.

13. Create a targeted media query for the tablet two-column layout:

    @media (min-width: 768px) and (max-width: 1199px) {
    
    }

    This precisely targets the sm and md breakpoints where the two-column layout is active, before switching to the four-column large screen layout at 1200px.

14. Add bottom margin to buttons specifically within the upcoming shows section:

    @media (min-width: 768px) and (max-width: 1199px) {
       .upcoming-shows .btn {
          margin-bottom: 30px;
       }
    }

    This targeted approach adds necessary spacing only where needed, without affecting button styling elsewhere on the site.

15. Save the file and conduct final cross-device testing.

16. Test index.html across all breakpoints to confirm optimal layout behavior at every screen size.

    You've now implemented a sophisticated responsive design that demonstrates professional-level attention to user experience details. This multi-breakpoint approach ensures optimal content presentation regardless of device or screen size.

    While this exercise covers core responsive techniques, Bootstrap offers extensive additional components and utilities. For comprehensive documentation and advanced techniques, visit getbootstrap.com, which remains the definitive resource for Bootstrap development in 2026.

    Consider exploring the additional Bootstrap exercises later in this workbook to deepen your understanding of component integration and advanced grid techniques.