Bootstrap: Skinning/Customizing Appearance

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Master advanced Bootstrap customization techniques: Override Bootstrap's default styling with confidence, implement custom media queries for precise breakpoint control, leverage Bootstrap's optional theme components, create professional fixed navigation bars, and integrate Bootstrap's comprehensive icon font system into your designs.

Exercise Preview

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

Exercise Overview

In this comprehensive exercise, you'll master the art of Bootstrap customization—a critical skill known as "skinning" in professional web development. Modern web projects demand unique visual identities while maintaining Bootstrap's robust functionality. You'll learn industry-standard techniques for transforming Bootstrap's default appearance into custom, branded experiences that stand out in today's competitive digital landscape.

1. If you completed the previous exercises, you can skip the following sidebar. We strongly recommend completing the foundational exercises (5C–6B) before proceeding, as they establish the critical Bootstrap grid concepts we'll be customizing. If you haven't finished them, follow the setup instructions below.

   Bootstrap Skinning Process

   Skinning refers to customizing the visual appearance of Bootstrap layouts without breaking the underlying responsive grid system. This process allows you to maintain Bootstrap's functionality while creating unique designs.

Improving the Footer

Professional websites require responsive footers that adapt gracefully across all devices. We'll start by addressing a common Bootstrap challenge: column behavior at different breakpoints.

1. For this exercise, we'll work exclusively with the Bootstrap folder. Open this folder in your code editor (modern editors like Visual Studio Code, Sublime Text, or Atom support folder-based workflows for better project management).

2. Open index.html in your browser to examine the current layout behavior.

Examine the footer at the bottom of the page, which displays The Jive Factory branding on the left and social media links on the right. While this layout functions well at desktop widths, the social links wrap to a new line prematurely at medium screen sizes. This occurs because we're using Bootstrap's sm (small) breakpoint, which activates at 768px. For better responsive behavior, we need the more aggressive xs (extra small) breakpoint.

1. Open index.html in your code editor.

2. Locate the footer section (approximately line 121) and update the column classes from sm to xs for both div elements:

   <footer class="row">
      <div class="col-xs-6">
         <h4>The Jive Factory <small>All rights reserved.</small></h4>
      </div> 
      <div class="col-xs-6">
         <ul class="nav-pills pull-right">
            <li><a href="#">X (formerly known as Twitter)</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">RSS</a></li>
         </ul>
      </div>
   </footer>

3. Save the file and preview index.html in your browser.

4. Test the responsive behavior by resizing your browser window. The footer now maintains its two-column structure across a wider range of screen sizes. However, at very small mobile screens (typically below 600px), this side-by-side layout becomes cramped and difficult to read. Bootstrap's built-in breakpoints don't provide the granular control we need, so we'll create a custom media query.

5. Switch to main.css in your code editor.

6. Add this custom media query above the existing media queries. This breakpoint targets devices smaller than 600px:

   @media (max-width: 599px) {
   
   }

   NOTE: The 599px breakpoint represents a strategic decision based on content testing. Professional developers typically test multiple breakpoints to find the optimal point where content becomes difficult to consume. The 600px threshold provides a clean round number that works well for most mobile devices while ensuring larger phones and small tablets maintain the two-column layout.

7. Inside the media query, force both footer columns to full width, creating a stacked layout for small screens:

   @media (max-width: 599px) {
      footer .col-xs-6 {
         width: 100%;    
      }
   }

8. Add a rule to neutralize Bootstrap's pull-right class, which floats the social links to the right:

   @media (max-width: 599px) {
      footer .col-xs-6 {
         width: 100%;    
      }
      footer .nav-pills.pull-right {
         float: none;
      }
   }

9. Save the file and test index.html in Chrome (we'll use Chrome DevTools for debugging).

10. Resize the browser window to less than 600px width. Notice that while the social links now stack below the company name, they're still aligning to the right—our CSS override isn't working as expected.

11. Right-click on any social link and select Inspect to open Chrome DevTools.

12. In the Elements panel, click on the <ul class="nav-pills pull-right"> element.

13. In the Styles panel, locate Bootstrap's .pull-right rule. You'll notice it includes !important after float: right. This CSS declaration forces the rule to override other styles, even those with higher specificity. To counter this, we must add our own !important declaration.

14. Return to main.css in your code editor.

15. Add !important to override Bootstrap's forced declaration:

    footer .nav-pills.pull-right {
       float: none !important;
    }

16. Save and refresh the page in your browser. The social links should now align left at small screen sizes, but you'll notice a visual misalignment due to Bootstrap's default padding on navigation elements.

17. Switch back to main.css and add a negative margin to counteract Bootstrap's built-in spacing:

18. Add this negative margin to align the social links properly with the footer text:

    footer .nav-pills.pull-right {
       float: none !important;
       margin-left: -15px;
    }

19. Save the file and test the responsive behavior.

20. Preview index.html and resize the browser window. The footer now provides an optimal user experience across all screen sizes, demonstrating professional responsive design principles.

Using Bootstrap's Optional Theme

Bootstrap's default aesthetic embraces flat design principles that align with modern web standards and provide an excellent foundation for custom styling. However, Bootstrap also includes an optional theme that adds subtle three-dimensional effects—gradients, shadows, and highlights—for projects requiring more visual depth.

1. Switch to index.html in your code editor.

2. Locate the Bootstrap CSS link (approximately line 7):

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

3. Duplicate this line to add the theme stylesheet. In Sublime Text, use Cmd–Shift–D (Mac) or Ctrl–Shift–D (Windows) for quick line duplication:

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

4. Modify the duplicated line to reference the theme stylesheet:

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

5. Save the file and examine the changes in your browser.
6. Study the visual enhancements carefully. The theme adds sophisticated touches: the navbar gains subtle gradients and shadows, buttons acquire three-dimensional depth, and the sidebar wells feature gradient backgrounds instead of flat colors. These effects create visual hierarchy and tactile appeal while maintaining Bootstrap's clean aesthetic.
7. For this project, we'll prioritize performance and design flexibility by using Bootstrap's default flat styling as our foundation. The theme adds approximately 20KB to page weight, and we'll be implementing custom styling that would conflict with these predefined effects.

8. Remove the theme stylesheet to maintain optimal performance:

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

Creating a Fixed Navbar

Fixed navigation bars provide consistent access to primary site navigation, a critical UX pattern for modern web applications. We'll transform our navbar with Bootstrap's inverse styling and implement proper fixed positioning.

1. Locate the navbar element (approximately line 12):

   <nav class="navbar-default">

2. Replace navbar-default with navbar-inverse to implement Bootstrap's dark theme:

   <nav class="navbar-inverse">

3. Save and preview the change. The navbar now features professional dark styling with white text and improved contrast—ideal for modern web applications.
4. To create persistent navigation that follows users as they scroll, we'll implement fixed positioning.

5. Add Bootstrap's navbar-fixed-top class:

   <nav class="navbar-inverse navbar-fixed-top">

6. Save and test the scrolling behavior. The navbar now remains visible during page navigation, but you'll notice it overlaps the page content. Fixed positioning removes elements from the document flow, requiring us to compensate with proper spacing.

7. Switch to main.css to address the content overlap issue.

8. Replace the existing margin with padding that accounts for the navbar height:

   body {
      padding: 80px 0 30px;
   }

   NOTE: Bootstrap's navbar measures 50px in height. We add 30px of additional spacing for visual breathing room, totaling 80px of top padding. The bottom padding prevents content from touching the page edge.

9. Save and verify that the navbar no longer obscures page content.

10. You'll notice that the navbar content doesn't align with the page content below. This misalignment occurs because fixed positioning pulls the navbar outside of Bootstrap's container constraint. We need to apply the same container class within the navbar structure.

11. Switch to index.html and wrap the navbar content in a container div:

12. Add the container wrapper as shown:

    <nav class="navbar-inverse navbar-fixed-top">
       <div class="container">
          <!—Brand and toggle get grouped for better mobile display—>
          <div class="navbar-header">

    Code Omitted To Save Space

    </div>
    
          <!—Collect the nav links, forms, and other content for toggling—>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    Code Omitted To Save Space

    </div><!—/.navbar-collapse—>
       </div>
    </nav>

13. Save and test the alignment across different screen sizes. The navbar content now maintains proper alignment with page content throughout all responsive breakpoints.

Adding Icons Using Bootstrap's Included Icon Font

Bootstrap includes Glyphicons, a comprehensive icon font that provides scalable, crisp icons without additional HTTP requests. Icon fonts offer significant advantages over image-based icons: they're vector-based (infinitely scalable), styleable with CSS, and load with your stylesheet rather than requiring separate asset requests.

1. Open index.html in your code editor.

2. Find the first Tickets button link (approximately line 49) for the Low Lustre show:

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

3. Add a shopping cart icon using Bootstrap's Glyphicon classes. Include a space after "Tickets" for proper visual separation:

   <a href="#" class="btn btn-default">Tickets <span class="glyphicon glyphicon-shopping-cart"></span></a>

   NOTE: Bootstrap's complete icon library and class reference is available at getbootstrap.com/components. The library includes over 260 professional icons covering common interface needs.

4. Save and preview the enhanced button. The shopping cart icon immediately communicates the button's e-commerce function.

5. Return to index.html and copy the shopping cart icon span element.

6. Apply the same icon enhancement to the remaining three Tickets buttons throughout the page, maintaining consistent spacing between text and icon.

7. For the navbar Contact link (approximately line 33), we'll add a communication icon:

   <li><a href="#">Contact</a></li>

8. Add a comment/speech bubble icon without spacing (we'll control positioning with CSS):

   <li><a href="#">Contact<span class="glyphicon glyphicon-comment"></span></a></li>

9. Save and test the navbar icon. On mobile devices, you may need to tap the hamburger menu to view the Contact link.

10. The comment icon requires refinement—it's too small and positioned too close to the text. Since icon fonts behave like text, we can use standard CSS typography and positioning properties.

11. Switch to main.css and add this rule below the existing hr.visible-xs rule:

12. Add professional icon styling:

    nav .glyphicon-comment {
       font-size: 1.2em;
       margin-left: 10px;
    }

13. Save and test the improved icon. While size and spacing are better, you'll notice two issues: the icon sits too high in the line, and the Contact text has shifted down slightly due to increased line-height from the larger icon.

14. Add line-height control to maintain navbar text alignment:

    nav .glyphicon-comment {
       font-size: 1.2em;
       line-height: 0;
       margin-left: 10px;
    }

15. Save and test. The Contact text realigns properly, but the icon still appears too high within the line.

16. Add relative positioning to achieve perfect vertical alignment:

    nav .glyphicon-comment {
       font-size: 1.2em;
       line-height: 0;
       margin-left: 10px;
       position: relative;
       top: .2em;
    }

    NOTE: Relative positioning allows us to fine-tune the icon's vertical placement without affecting surrounding elements. The .2em offset compensates for the increased font-size, creating visual balance.

17. Save and verify the polished icon implementation across all screen sizes.

Skinning or Customizing the Design

Now we'll transform the entire page aesthetic with a sophisticated dark theme that demonstrates professional Bootstrap customization techniques.

1. Open background-gradient.css from the snippets folder.

   This file contains advanced CSS gradient code that creates a diagonal striped pattern—a technique that adds subtle texture without overwhelming content.

2. Select and copy all the gradient CSS code.
3. Switch to main.css in your code editor.

4. Paste the CSS into the body rule to create a sophisticated dark theme:

   body {
     padding: 80px 0 30px;
     color: #ddd;
     background-color: #222;
     background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0,.2) 35px, rgba(0,0,0,.2) 70px);
     background-attachment: fixed;
   }

5. Save and preview the dramatic transformation. The page now features a professional dark theme with subtle geometric patterning, but we need to refine the details for optimal readability.

6. The horizontal rule elements that separate content sections appear too bright against the dark background, creating harsh contrast that disrupts visual flow.

7. Add this rule before the hr.visible-xs declaration to create subtle content separation:

8. Implement refined horizontal rule styling:

   hr {
      border-color: #555;
   }

9. Save and preview the improved contrast. The page now demonstrates professional dark theme implementation that maintains excellent readability while creating visual distinction from standard Bootstrap sites.

The white backgrounds of the sidebar wells create jarring contrast against our new dark theme. In a production environment, you would continue this customization process by addressing these elements and any other components that conflict with your design vision. This exercise demonstrates the fundamental techniques for transforming Bootstrap's appearance while maintaining its responsive functionality and accessibility features.