Leveling Up Your App With Advanced Bootstrap Features

The following is an excerpt from the new whitepaper The Anatomy of
Responsive ASP.NET Apps

Responsive design changes the way we think about displaying content on our web pages. As the complexity of the user interface increases, the difficulty of building the interface also increases. Because these complex interfaces require creative solutions, Bootstrap has included advanced features that can make short work out of even the toughest scenario.

It’s time to take your Bootstrap skills to the next level. Let’s learn about powerful features like: fluid containers, visibility, offsets, push/pull and more. By learning these features, you’ll be able to recognize when they are needed and know how to implement them. It’s time to become a Bootstrap master, and leverage the full power of the framework, let’s dig in.

Fluid Containers

If you have used Bootstrap before, you may already know about the container class. The container is a class that is applied to the outermost grid element. The whitespace can vary depending on device size resulting in a maximum layout width at each breakpoint. Most of the time the default values are good enough for a given project, however if your project requires more customization you may need a fluid container.

container

Bootstrap has a second container class, container-fluid. The container-fluid class works very differently than the basic container. Instead of having break points that determine the amount of whitespace to use, container-fluid creates a layout that fills the entire width of the screen.

container-fluid

A fluid container is useful for full screen applications, but it also can be used to create a custom page width for your layout. Having a custom page width can be especially useful when you want set the maximum value that your layout will grow to, but not grow past. Let’s see how this can be done in just a few easy steps.

  1. Start by changing an existing container to container-fluid.
  2. Specify a max-width for container-fluid. The value will be the largest size the layout will expand to, once the layout fills this space it will stop growing, no matter how large the screen is. The CSS should be placed so that it overrides any default values from bootstrap.css.

    .container-fluid {
        max-width: 1400px; // Custom max width for this layout
    }

    container-fluid-custom

  3. We can further customize the container by adding whitespace. By adding additional padding to the container, smaller screens will have a noticeable buffer between the edge of the screen and the application elements.

    .container-fluid {
            max-width: 1400px;
    		padding:30px; // Whitespace or outside gutter
    }

    container-fluid-custom-small

The basic container is a good starting point for most apps, however using the fluid container puts you in control of the page size. Build the application to your requirements and users’ needs, instead of always conforming to the frameworks default values.

Nested Rows

Rows and columns are the fundamental building blocks of a Bootstrap grid. It’s common practice to divide up a layout into pieces like navigation and content, but the grid is capable of so much more. Rows in Bootstrap can be infinitely nested, which means we have limitless control over how the grid is divided up. Once outer elements like navigation and content are defined, inner elements can be created that contain UIs that have their own grids.

Each column can contain a row which can then be divided up again into 12 units, these units are relative to the container.

Let’s look at building a social media UI as an example of nested grids. We start with the outer most layout elements. These layout elements will contain a navigation and content section.

<div class="row">
    <nav class="col-md-4">
        <!-- Navigation -->
    </nav>
    <section class="col-md-8">
        <!-- Content -->
    </section>
</div>

nesting-outer-grid

Next, we add a new .row to the content section. The new row will contain the UI for social media posts.

fully-nested-row

<div class="row">
    <nav class="col-md-4">
        <!-- Navigation -->
    </nav>
    <section class="col-md-8">
        <!-- Content -->
        <div class="row">
            <!-- Social Media Posts -->
        </div>
    </section>
</div>

The new row is divisible into 12 more columns. This row will be a social media post, so we’ll make space for an avatar that’s 2 columns wide and the post content will use the remaining 10 columns.

<div class="row">
    <nav class="col-md-4">
        <!-- Navigation -->
    </nav>
    <section class="col-md-8">
        <!-- Content -->
        <div class="row">
            <!-- Social Media Post -->
            <div class="col-md-2">
                <!-- Avatar -->
            </div>
            <div class="col-md-10">
                <!-- Post Content -->
            </div>
        </div>
    </section>
</div>

fully-nested

Offsets

Sometimes UIs need a little help adapting to different screen sizes. Offsets are a great tool when elements need to create additional whitespace or horizontal positioning. Offsets can be used to horizontally center an element without creating unnecessary columns to achieve the effect. Offsets are created by adding the offset class .col-[screen size]-offset-[width] to an element.

In this example, we’ll use offsets to center a login box on the screen. The login panel will be 4 columns wide, this means we will need 4 columns of white space on either side. Your first instinct may be to use three elements, each 4 columns wide and leave the outer two empty.

<div class="row">
  <div class="col-md-4">
    <!-- empty -->
  </div>
  <div class="col-md-4">
    <!-- login form -->
  </div>
  <div class="col-md-4">
    <!-- empty -->
  </div>
</div>

This approach would work, however the additional markup will increase page size and create needless clutter in when editing the page. Instead, let’s use the offset class to achieve the same effect using less markup.

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <!-- login form -->
  </div>
</div>

offsets

Push/pull

Content that uses a mix of text and media can be difficult to manage at different screen sizes. Creating one layout that can adapt appropriately can mean displaying elements on the screen in a different order than they appear in the markup. When you encounter this problem, the first instinct might be to reach for a JavaScript solution, however the issue can be resolved with a few simple CSS classes.

Let’s use an alternating split view layout as an example. In this example, the large layout will alternate between image | text, then text | image and so on.

alternating-items

The layout for small screens should also alternate between image and text, except it should do so vertically.

alternating-items-mobile

If the markup is created thinking from a desktop-first approach, then alternating the layout in the markup might seem like the right idea. However, the order in which the elements are defined in markup will change both the large and small layouts, resulting in a large layout which behaves correctly but a small layout that does not.

<div class="row">
    <div class="col-lg-4">
        <!-- img -->
    </div>
    <div class="col-lg-8">
        <!-- text -->
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <!-- text -->
    </div>
    <div class="col-lg-4">
        <!-- img -->
    </div>
</div>

alternating-items-ok

alternating-items-mobile-incorrect

Instead of changing the source code order, build the layout starting mobile first. Next, use the push/pull classes to move the elements horizontally around the grid. This is done by pushing the left elements to the right, and pulling the right elements to the left, effectively swapping their positions.

<div class="row">
    <div class="col-lg-4">
        <!-- img -->
    </div>
    <div class="col-lg-8">
        <!-- text -->
    </div>
</div>

<div class="row">
    <div class="col-lg-4 col-lg-push-8">
        <!-- img -->
    </div>
    <div class="col-lg-8 col-lg-pull-4">
        <!-- text -->
    </div>
</div>

Adding col-lg-push-8 and col-lg-pull-4 to the elements causes them to swap positions on a large screen.

alternating-items-push-pull

Push/pull classes can be used with multiple columns in a row and at different screen sizes.

Wrap up

The Bootstrap grid system is a powerful tool for creating layouts. Understanding Bootstrap’s advanced features puts you in full control allowing you to build exactly what’s needed for your project. Custom containers with container-fluid allow you to fine tune the overall width of a layout. When complex UIs are needed, nested rows can solve even the most complex app layouts. Finally, offsets and push\pull classes let you determine when and where elements move about the grid. Be a layout master and combine Bootstrap’s advanced features in your next project.

Header image courtesy of Eloïse L

Comments

  • I’ve found Bootstrap to be great for basic layout stuff but the typography and break-points are all set in pixels instead of ems – Until they do this it won’t be a truly great cross-browser solution.

    • Ed Charbeneau

      Foundation is better suited for what you are talking about. Most of the techniques discussed above can be used with Foundation as well. Push/Pull, nesting, offsets and more are in Foundation with slightly different syntax.

      • Foundation is definitely better but for marketing websites I’ve found it a little too over the top on opinion and size. If using a framework at all, I’ve found Kraken to be great without needing to use a custom sub-set of Foundation as it already represents the basics I often want to pare down to.

        • Ed Charbeneau

          Good info. I’ll be re-evaluating all of these frameworks when Bootstrap 4.0 is released.

      • With what’s happening with Feather it seems like there will be pretty easy integration with whichever framework one picks. Exciting times.

  • Looking at the implementations of these classes, col-*-offset-* uses margin and col-*-push-* uses left. They seem to do the same thing. What’s the difference, and when should I choose one over the other?

  • Pingback: Tweet Parade (no.42-2015) - Best Articles of Last Week | gonzoblog()

  • Pingback: My readings in 2015 week 42 | My path to become awesome dev()