Bootstrap: More Elements & Nesting Grids

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Adding an Email Signup Form, Nesting Sections

Exercise Preview

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

Exercise Overview

In the previous exercise, we established the foundational layout of our responsive webpage. Now we'll enhance it with advanced Bootstrap components and explore one of the framework's most powerful features: nested grid systems. This exercise will demonstrate how to create sophisticated, multi-layered layouts that maintain their responsiveness across all device sizes.

You'll master the art of nesting columns within existing columns—a technique that separates novice Bootstrap users from experienced developers. This approach allows for incredibly flexible layouts that would require extensive custom CSS in traditional development workflows.

1. If you completed the previous exercise, you can skip the following sidebar. We strongly recommend finishing the previous exercise (5C) before proceeding, as this builds directly on those foundational concepts. If you haven't completed it, follow the setup instructions below.

   Prerequisites Check

   This exercise builds directly on Exercise 5C. If you haven't completed the previous exercise, you'll need to use the provided Bootstrap Getting Started Done folder as your starting point.

Adding an Email Signup Form

Email capture forms are essential components of modern web design, driving user engagement and building valuable marketing lists. We'll implement a professional-grade signup form using Bootstrap's form components, which provide consistent styling and built-in responsiveness.

1. We'll add an email signup form to the sidebar, positioning it strategically after our promotional content to capture user interest. After the second well (containing the Jive at Five content), add the following code:

   <div class="well">
            <h4>Jive at Five</h4>
            <p>Happy Hour Drink Specials 5–8 pm</p>
         </div>
         <hr>
         <form>
            <p>Get email alerts for upcoming shows!</p>
            <div>
               <input type="email">
               <button>Sign Up</button>
            </div>
         </form></div>
   </div>
   <hr>

2. Save and preview index.html in a browser. You'll notice the form displays with basic browser default styling—functional but visually inconsistent with our design.

   • Click into the text field and observe the browser's default appearance and border treatment.

   • Resize the browser window and notice how the elements don't adapt well to different viewport sizes, sometimes breaking onto separate lines awkwardly.

3. Bootstrap's utility classes will transform these basic form elements into polished, professional components. Return to your code editor and enhance the form with Bootstrap's styling classes:

   <form>
      <p>Get email alerts for upcoming shows!</p>
      <div>
         <input type="email" class="form-control">
         <button class="btn-default">Sign Up</button>
      </div>
   </form>

4. Save and preview index.html in a browser. The transformation should be immediately apparent—Bootstrap's component classes have applied sophisticated styling to both elements. Click into the text field to experience the subtle CSS transition and focus states that create a premium user experience.

5. While the button now matches the input field aesthetically, it lacks visual hierarchy for effective conversion optimization. Let's make it more prominent by changing its class:

   <form>
      <p>Get email alerts for upcoming shows!</p>
      <div>
         <input type="email" class="form-control">
         <button class="btn-primary">Sign Up</button>
      </div>
   </form>

6. Save and preview index.html in a browser. The button should now display in Bootstrap's primary brand color (typically blue), creating a clear call-to-action that draws user attention. For a comprehensive overview of all available button styles and their appropriate use cases, consult the official documentation at getbootstrap.com/css/#buttons

7. Now we'll group these elements into a cohesive input unit using Bootstrap's input group component. This creates a seamless, professional appearance common in modern web applications:

   <form>
      <p>Get email alerts for upcoming shows!</p>
      <div class="input-group">
         <input type="email" class="form-control">
         <button class="btn-primary">Sign Up</button>
      </div>
   </form>

8. Save and preview index.html in a browser. Notice how the text field now has squared corners on the right side, preparing for seamless integration with the button. However, the button still appears oversized and misaligned—we need one final adjustment.

9. Bootstrap's input group component requires a specific wrapper element for buttons to ensure proper sizing and alignment. Add the following span wrapper around the button:

   <form>
      <p>Get email alerts for upcoming shows!</p>
      <div class="input-group">
         <input type="email" class="form-control">
         <span class="input-group-btn">
            <button class="btn-primary">Sign Up</button>
         </span>
      </div>
   </form>

10. Save and preview index.html in a browser. Perfect! The button now integrates seamlessly with the input field, creating a unified component that fills the full width of its container and maintains its cohesive appearance across all screen sizes.

Nesting Columns

Column nesting represents one of Bootstrap's most sophisticated features, allowing developers to create complex, multi-layered layouts within existing grid structures. This technique is essential for building modern, content-rich websites that maintain perfect responsiveness.

We'll now add an Upcoming Shows section beneath our slideshow image, demonstrating how nested grids can organize multiple pieces of related content within a larger layout structure.

1. Switch back to your code editor to begin implementing the nested layout structure.

2. Locate the slideshow section around line 39. After the slideshow placeholder image, we'll create a new nested row to house our upcoming shows content:

   <div class="col-sm-8">
      <img class="img-responsive" src="img/slideshow-low-lustre.jpg">
      <hr>
      <div class="row">
   
      </div>
   </div>
   <div class="col-sm-4">

3. We'll showcase three upcoming shows in our initial layout. For now, we'll add just the images to observe how Bootstrap's column classes behave within nested structures. Inside the new row div, add the following content:

   <div class="col-sm-8">
      <img class="img-responsive" src="img/slideshow-low-lustre.jpg">
      <hr>
      <div class="row">
         <div>
            <img src="img/thumb-low-lustre.jpg">
         </div>
         <div>
            <img src="img/thumb-juliette.jpg">
         </div>
         <div>
            <img src="img/thumb-plastic-brain.jpg">
         </div>
      </div>
   </div>

4. Save and preview index.html in a browser. Without column classes, the thumbnails stack vertically by default—demonstrating why explicit column definitions are crucial for achieving the desired layout.

Bootstrap's column system operates on percentage-based calculations, making it infinitely nestable. Within any column, you can create up to 12 new sub-columns, maintaining the same responsive behavior as the parent grid. This principle enables incredibly flexible layouts that scale seamlessly across devices.

For our three upcoming shows, we'll use col-sm-4 classes (3 columns × 4 units = 12 total units), creating equal-width columns within our existing 8-unit main content area.

1. Return to your code editor and apply the appropriate column classes:

   <div class="row">
      <div class="col-sm-4">
         <img src="img/thumb-low-lustre.jpg">
      </div>
      <div class="col-sm-4">
         <img src="img/thumb-juliette.jpg">
      </div>
      <div class="col-sm-4">
         <img src="img/thumb-plastic-brain.jpg">

2. Save and preview index.html in a browser. The images now arrange themselves in three columns as intended, but they appear oversized because they're not scaling to fit their new containers. While we previously used the img-responsive class for individual images, managing responsive images across an entire site calls for a more efficient, global approach.

3. Switch back to your code editor to implement a site-wide solution for responsive images.

4. Creating a custom CSS file allows us to override or extend Bootstrap's default styling while maintaining the framework's benefits.

5. In your code editor, create a new document for our custom styles.

6. Save it as main.css in the css folder, following the convention of placing custom styles after framework styles.

7. In the empty CSS file, add a global rule that makes all images responsive by default:

   img {
      max-width: 100%;
   }

8. Save the file to apply the new styling rule.

9. Switch back to index.html in your code editor to link our custom stylesheet.

10. Link to the newly created main.css file after the Bootstrap CSS link, ensuring our custom styles take precedence:

    <link rel="stylesheet" href="css/bootstrap.min.css">
       <link rel="stylesheet" href="css/main.css">
    </head>

11. Save the file and preview index.html in a browser. The three images should now scale perfectly to fit within their respective columns, demonstrating the power of global CSS rules.

12. Switch back to index.html in your code editor to clean up redundant code.

13. Around line 39, remove the now-unnecessary img-responsive class from the slideshow image:

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

    NOTE: Our global CSS rule has eliminated the need for individual responsive image classes throughout the site.

14. Real-world content requirements often change during development. Let's adapt our layout to accommodate a fourth upcoming show, demonstrating the flexibility of Bootstrap's grid system:

    <div class="row">
       <div class="col-sm-3">
          <img src="img/thumb-low-lustre.jpg">
       </div>
       <div class="col-sm-3">
          <img src="img/thumb-juliette.jpg">
       </div>
       <div class="col-sm-3">
          <img src="img/thumb-plastic-brain.jpg">
       </div>
       <div class="col-sm-3">
          <img src="img/thumb-dusty-shoes.jpg">
       </div>
    </div>

15. Save and preview index.html in a browser. Excellent! The layout automatically adapts to accommodate four equal-width columns (4 columns × 3 units = 12 total units).

16. To complete this section, we need to add detailed information for each show. Rather than requiring manual data entry, we've prepared comprehensive HTML content. In your code editor, open upcoming-shows.html from the snippets folder.

17. Select all the code in the file.

18. Copy the content to your clipboard.

19. Close the snippets file to return to your main workspace.

20. Back in index.html, select all four div elements containing the upcoming shows images and their containers:

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

    Code Omitted To Save Space

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

21. Paste the prepared content to replace the basic structure with rich, detailed show information.

22. Save and preview index.html in a browser. Each image now displays with comprehensive show details, including dates, times, pricing, and featured artists. While the layout may appear cramped at certain screen sizes, we'll optimize the responsive behavior in the following exercise.

23. Let's enhance the visual presentation using Bootstrap's component classes. Add the img-thumbnail class to create professional-looking bordered images:

    <div class="col-sm-3">
       <img class="img-thumbnail" src="img/thumb-low-lustre.jpg">
       <h3>Low Lustre</h3>
       <h4>Thursday, June 5</h4>
       <p>Show: 10 PM $15</p>
       <p>Featuring: Matthew Lein…
       <a href="#">Tickets</a>
    </div>
    <div class="col-sm-3">
       <img class="img-thumbnail" src="img/thumb-juliette.jpg">

    Code Omitted To Save Space

    <div class="col-sm-3">
       <img class="img-thumbnail" src="img/thumb-plastic-brain.jpg">

    Code Omitted To Save Space

    <div class="col-sm-3">
       <img class="img-thumbnail" src="img/thumb-dusty-shoes.jpg">

24. Save and preview index.html in a browser. The thumbnail borders create visual definition and professional polish that distinguishes the images from the surrounding content.

25. Typography hierarchy improves content scanability and user experience. Apply Bootstrap's text-muted class to the descriptive paragraphs to create visual contrast with primary information:

    <div class="col-sm-3">
       <img class="img-thumbnail" src="img/thumb-low-lustre.jpg">
       <h3>Low Lustre</h3>
       <h4>Thursday, June 5</h4>
       <p>Show: 10 PM $15</p>
       <p class="text-muted">Featuring: Matthew Lein…
       <a href="#">Tickets</a>
    </div>
    <div class="col-sm-3">

    Code Omitted To Save Space

    <p class="text-muted">Featuring: Juliette…
       <a href="#">Tickets</a>
    </div>
    <div class="col-sm-3">

    Code Omitted To Save Space

    <p class="text-muted">Featuring: Luxe Landfill… 
       <a href="#">Tickets</a>
    </div>
    <div class="col-sm-3">

    Code Omitted To Save Space

    <p class="text-muted">Featuring: Jen Mason…
       <a href="#">Tickets</a>

26. Save and preview index.html in a browser. The muted text creates subtle visual hierarchy, allowing essential information like show names and dates to stand out while keeping detailed descriptions accessible but secondary.

27. Call-to-action elements should stand out prominently to drive conversions. Transform the plain text links into button-styled elements that match our design system.

28. Apply Bootstrap's button styling to all four ticket links for consistency and improved user experience:

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

29. Save and preview index.html in a browser. The ticket links now appear as professional buttons that provide clear visual cues for user interaction. The page demonstrates sophisticated layout techniques while maintaining clean, professional aesthetics throughout.