bs3
Bar Talk

Bootstrap 3 Tips and Tricks You Might Not Know

Bootstrap 3 has a ton of features and helpers to speed up front-end development. Sometimes you need something and you end up writing your own custom CSS and JavaScript without even realizing that Bootstrap could have done it for you. That’s not necessarily a problem, but you end up spending extra time on your app or site when you didn’t need to.

Bootstrap is a front-end framework. I personally use it with 99% of my front-end development. In the last 6 months, I have been lucky enough to work on some pretty custom bootstrap based projects to name some off. The purpose of this article is to share the things that I have learned and touch-base on some other things that I have seen people miss about the framework’s capabilities.

Don’t forget to check out part II for more tips and tricks!

bs3-2

How to Enable Bootstrap 3 Hover Dropdowns

I love Bootstrap, but I’m not really a fan of the navigation it creates. It works really well when you’re prototyping, but if you’re doing a high-level design project, you’re better off going custom. Bootstap’s default navigation doesn’t have out-of-the-box hover dropdowns, and the mobile menu is arguably pretty boring. If you do use it though, there are some tricks to help you tweak it without going completely custom.

Some clients, sites, or apps will require you to have hover dropdowns on desktop. As you can see below, this doesn’t come out-of-the-box with Bootstrap 3.

You can easily add hover dropdowns with the following CSS:

@media only screen and (min-width : 768px) {
    /* Make Navigation Toggle on Desktop Hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

The CSS above makes the dropdowns show all on its own, but it doesn’t take you to the parent link (in this case reddit.com) when clicked. Although not the most elegant solution, here’s some JavaScript (jQuery) that can help you achieve that:

$('.dropdown-toggle').click(function() {
    var location = $(this).attr('href');
    window.location.href = location;
    return false;
});

Now, here’s an example of the navigation modified with the changes:

On most of my projects, I have dropped using the default navbar completely (including trying to modify it like the above example). Instead I tend to build my own, and I’ve recently became a huge fan of Off Canvas Menus. I highly recommend you check and try it out!

Don’t forget Container Fluid for Full Width Rows

Admittedly, when I first started using Bootstrap 3, I never used the container-fluid class for full width rows. If I needed a full-width row, I simply just omitted the container. This made sense to me, and the grid system tends to work without it. This is problematic though because Bootstrap’s row class has a -15px left and right margin. Here’s an example explaining it further. You can also view it in a full window to better understand what’s going on.

See the Pen Bootstrap 3 Container Examples and Common Misuse by Nicholas Cerminara (@ncerminara) on CodePen.

Media Query Break Points

Here are the default Media Queries you should be using:

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

We also have a Quick Tip for reference here. If you use SASS or LESS, you can use the built in variables (small, medium, large, etc.) for the breakpoints.

Different Grid Columns at Different Device Sizes

The Bootstrap grid is fantastic, and it’s extremely powerful to use when building responsive websites. It lets you stack your grids differently depending on the device size (mobile, tablet, desktop). If you do:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <i class="fa fa-heart"></i>
        </div>
        <div class="col-md-3">
            <i class="fa fa-heart"></i>
        </div>
        <div class="col-md-3">
            <i class="fa fa-heart"></i>
        </div>
        <div class="col-md-3">
            <i class="fa fa-heart"></i>
        </div>
    </div>
</div>

It will stack like this on large devices (desktop):

   

And it will stack like this on small devices (tablets/phones, 768px and below):




You could however make this stack a little nicer by doing this slightly more advanced grid trick:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <i class="fa fa-heart"></i>
        </div>
        <div class="col-md-3 col-sm-6">
            <i class="fa fa-heart"></i>
        </div>
                <div class="col-md-3 col-sm-6">
            <i class="fa fa-heart"></i>
        </div>
        <div class="col-md-3 col-sm-6">
            <i class="fa fa-heart"></i>
        </div>
    </div>
</div>

Now, when you view this on large devices (desktops), you’ll still see this:

   

But now on small devices (tablets/phones, 768px and below), it will collapse a little nicer like this:

 
 

Nested Columns

Nesting Columns comes in very handy when you want to take advantage of the grid system from within a column. The cool part is you can do this as many times as you would like. The columns even still respect the media query break points. All you have to do is open up a new row class and restart your columns. Check the code below to see an example:

<div class="container-fluid">
     <div class="row">
         <div class="col-md-6">
             <div class="row">
                 <div class="col-md-8">
                     <div class="row">
                         <div class="col-sm-3">
                             <span>1</span>
                         </div>
                         <div class="col-sm-3">
                             <span>2</Span>
                         </div>
                         <div class="col-sm-3">
                             <span>3</span>
                         </div>
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="row">
                         <div class="col-md-8">
                             <span>1</span>
                         </div>
                         <div class="col-md-4">
                             <span>2</span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-md-6">
             <div class="row">
                 <div class="col-xs-2">
                     <span>1</span>
                 </div>
                 <div class="col-xs-2">
                     <span>2</span>
                 </div>
                 <div class="col-xs-2">
                     <span>3</span>
                 </div>
                 <div class="col-xs-2">
                     <span>4</span>
                 </div>
                 <div class="col-xs-2">
                     <span>5</span>
                 </div>
                 <div class="col-xs-2">
                     <span>6</span>
                 </div>
             </div>
         </div>
     </div>
 </div>

The Official Bootstrap Docs on Nested Columns have a great visualization of nest columns.

Column Collapse Order

Columns collapse in an order that makes sense. Any column that has columns following it will collapse below it. It’s the exact same way you would expect floated (float: left;) elements to collapse. Sometimes though, you need your columns to collapse the opposite way. Here’s how you can do easily switch it:

<!--
    Desktop:
        [1 2 3] [1 2 3 4 5 6 7 8 9]

    Mobile:
        [1 2 3]
        [1 2 3 4 5 6 7 8 9]
-->
 <div class="row">
     <div class="col-md-9 col-md-push-3">1 2 3 4 5 6 7 8 9 </div>
     <div class="col-md-3 col-md-pull-9">1 2 3 </div>
 </div>

 <!--
    Desktop:
        [ 2nd col ] [ 1st col ]

    Mobile:
        [ 2nd col ]
        [ 1st col ]
-->
 <div class="row">
     <div class="col-md-6 col-md-push-6">1st col</div>
     <div class="col-md-6 col-md-pull-6">2nd col</div>
 </div>

Lead Class

This simply makes a paragraph tag a slightly larger font with a lower font-weight. It’s good for introductory text and callouts preceding major content without using up your precious Heading tags. Here’s how to implement with the result below:

<p class="lead">This is a lead paragraph. Lead paragraphs can really tie content of a page together! It attracts your eye!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.</p>                 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.</p>                 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.</p>

This is a lead paragraph. Lead paragraphs can really tie content of a page together! It attracts your eye!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.

Blockquote Reverse

Bootstrap has default styles associated with the blockquote tag. There’s actually two variations of the tag however so you can mix up your layouts. Check out the examples below:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<blockquote class="blockquote-reverse">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

“Flatten” a List

If you do a lot of front-end development, you probably know the li { display: inline-block; } trick for flattening a list. This is nice because you don’t have to float and clear the elements, and they center almost perfectly with just text-align: center;.

To save you some time, you can actually just add the class list-inline to your list and all of its padding will be removed, the li tags will be displayed inline-block, and the list-style attribute will be set to none. Check out the example below to see it in action:

Normal List

  • One
  • Two
  • Three

Inline List

  • One
  • Two
  • Three

Labels for Screen Readers

If you only use placeholders for your input fields, it’s best practice to also add a hidden label for the input so screen readers can read the page. Here’s an example of how to set that up quickly with Bootstrap:

<label for="id-of-input" class="sr-only">My Input</label>
<input type="text" name="myinput" placeholder="My Input" id="id-of-input">

And here’s the output:

Image Responsive Class

If you’re building responsive websites, you probably realized by now that to make an image responsive is as easy as setting the width to a percentage and the height to auto. This way the image will automatically scale with the browser. You can use the img-responsive class to do this CSS for you.

Image Shapes Classes

Bootstrap also has 3 awesome helper classes for images that modify its shape. The classes are img-rounded, img-circle, and img-thumbnail. I find myself using img-circle and img-thumbnail the most. Check out the examples below:

The img-circle Class


The img-thumbnail Class

Conclusion

Some front-end developers are very reluctant about using already existing front-end code. I can completely understand where they’re coming from at times, but Bootstrap 3 has plenty of tools for speeding things up while keeping your code clean and neat.

Chances are a lot of the items in this post were already familiar to you. Bootstrap really is a powerful front-end framework, and the more you take advantage of it, the faster you can slice and “bootstrap” sites together. I wrote this post fairly quickly, so please let me know about any errors or typos. Hopefully you found something here useful. Thanks for reading!

Thanks for reading! Please check out Part II!

bs3-2

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.

Roll Tide (more articles)