Post

Bootstrap 3 Tips and Tricks You Still Might Not Know

Draft updated on Invalid Date
    Default avatar

    By Nicholas Cerminara

    Bootstrap 3 Tips and Tricks You Still Might Not Know

    This tutorial is out of date and no longer maintained.

    Introduction

    Bootstrap 3 is awesome. Not only does it provide all the basics of a front-end framework, but it also has a ton of helpers to speed up development. These helpers can be used to rapidly prototype something out or to build an extremely strong and reliable front-end foundation for a longer-term application. This post is a follow-up to Bootstrap 3 Tips and Tricks You Might Not Know with even more tricks and tips. Mostly everything in these posts is coming directly from the documentation itself. So hopefully some of these you immediately recognize and others you’ll wonder how you missed that.

    What did I miss in Part I?

    If you’re curious to see some of the other tips and tricks we already talked about, you can read about them here. A quick summary is:

    • How to Enable Bootstrap 3 Hover Dropdowns
    • Don’t forget Container Fluid for Full Width Rows
    • Media Query Break Points
    • Different Grid Columns at Different Device Sizes
    • Nested Columns
    • Changing Column Collapse Order
    • Lead Class
    • Blockquote Reverse
    • Flatten a List
    • Labels for Screen Readers
    • Image Responsive Class
    • Image Shapes Classes

    Optionally Remove the Gutter Padding from Columns

    Bootstrap lets you customize and compile your own build based on your needs. This is anything from colors, container sizes, and gutter padding size. However, sometimes you’ll come across an instance where you just want a single row with no padding. In most cases, you’ll just individually select the column and kill off the padding with CSS. However, you can build your own utility class helper to do this on the fly. This utility class will cover all column sizes and still supports full responsiveness. Here’s the CSS snippet:

        .no-gutter > [class*='col-'] {
            padding-right:0;
            padding-left:0;
        }
    

    And here’s how you can use it in your HTML:

        <div class="row no-gutter">
            <div class="col-md-4">
                ...
            </div>
            <div class="col-md-4">
                ...
            </div>
            <div class="col-md-4">
                ...
            </div>
        </div>
    

    Lastly, here’s a nice little demo of it on CodePen:

    See the Pen Optionally Remove the Gutter Padding from Columns by Nicholas Cerminara (@ncerminara) on CodePen.

    Custom Container Sizes

    Like it or not, sometimes you’ll be working on a design that doesn’t follow a grid system or a designer who likes to push the boundaries farther and use different grid column sizes on different rows throughout a page and/or site. Bootstrap columns automatically fill to their parent container. So if you need a smaller container or a larger container, you can easily extend the Bootstrap core and make your own container classes. Here’s an example:

        @media (min-width: 768px) {
            .container-small {
                width: 300px;
            }
            .container-large {
                width: 970px;
            }
        }
        @media (min-width: 992px) {
            .container-small {
                width: 500px;
            }
            .container-large {
                width: 1170px;
            }
        }
        @media (min-width: 1200px) {
            .container-small {
                width: 700px;
            }
            .container-large {
                width: 1500px;
            }
        }
    

    Now the only thing you need to worry about is overflow issues if say a container you made is larger than the device window. For example with the .container-large class, if a user has a browser window of 1200px, it will create this nasty overflow issue. Here’s the fix for that.

        .container-small, .container-large {
            max-width: 100%;
        }
    

    Finally, here’s a nice little demo of it in action. Notice how the columns are still responsive at the breakpoints.

    Note: You’ll have to see the demo in a full-screen browser (not the embed to see its full effect.

    See the Pen Optionally Remove the Gutter Padding from Columns by Nicholas Cerminara (@ncerminara) on CodePen.

    Use Heading Classes to Save Time and Stay Semantic

    A design sometimes will have elements that don’t always match best practices for having semantic markup. What I mean by this is usually your h1 tag is followed by an h2 and so on. This isn’t necessarily a bad thing when this happens, it’s just something to watch out for because, at the end of the day, one of the most important things to make sure of is that your markup is structured in a way that is friendly to read for Google and other Bots.

    You can swap out Headings styles with different classes. Take a look at the example code below to see it in action:

        <h1 class="h2">Heading 1 that looks like Heading 2</h1>
        <h2 class="h4">Heading 2 that looks like Heading 4</h2>
        <h3 class="h1">Heading 3 that looks like Heading 1</h3>
    

    See the Pen Use Heading Classes to Save Time and Stay Semantic by Nicholas Cerminara (@ncerminara) on CodePen.

    Responsive Video Embeds that Maintain Aspect Ratio

    When Bootstrap 3.2 came out, it came out with an additional helper class to make it easier to make iframes (like YouTube embeds) responsive while maintaining a certain aspect ratio. It’s extremely easy to use these, just add the following code to your markup:

        <!-- 16:9 aspect ratio -->
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/tGrOIfmKdrg"></iframe>
        </div>
    
        <!-- 4:3 aspect ratio -->
        <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/tGrOIfmKdrg"></iframe>
        </div>
    

    Notice how the iframe doesn’t include frameborder="0". This is because Bootstrap will actually normalize any ugly outlines for you with this helper class.

    See the Pen Bootstrap 3 Responsive Video Embeds that Maintain Aspect Ratio by Nicholas Cerminara (@ncerminara) on CodePen.

    Responsive Utility Classes Need a Display Property

    With Bootstrap 3.2 being released, they updated the way responsive utility classes work. Normally you would just assign .visible-xs, .visible-sm, .visible-md, and .visible-lg to hide or show certain elements at different device widths. Now, you actually have to specify a “state” as well of either block, inline, or inline-block. This maximizes your control, but if you’re confused on which one to use, just use block. Here are some examples:

        /* With * being xs, sm, md, or lg */
        .visible-*-block {}
        .visible-*-inline {}
        .visible-*-inline-block {}
    

    Extend the Class, Don’t Override It

    I often see front-end code where developers completely override Bootstrap styles to customize buttons and other elements rather than extending the existing classes. This gets messy real fast. It’s much easier to maintain if you just extend the existing classes. For example, let’s make a completely flat and yellow button called .btn-yellow to demo the principle.

        .btn-yellow {
          background: rgb(250, 255, 140);
          color: #574500;
          border: none;
          -moz-box-shadow: none !important;
          -webkit-box-shadow: none !important;
          box-shadow: none !important; /* !important tags aren't necessarily always bad */
        }
        .btn-yellow:hover, .btn-yellow:focus {
          background: rgb(252, 255, 179);
        }
        .btn-yellow:active {
          background: rgb(247, 255, 71);
        }
    

    Note: Using a color as a class name is probably a bad idea and can make maintaining your CSS harder than it needs to be. The example does it, but you should do something like btn-custom-name.

    See the Pen Yellow Bootstrap Button by Nicholas Cerminara (@ncerminara) on CodePen.

    This way you can still use things like .btn-lg or .btn-block to customize your buttons. Now, I’ll also make a class called .btn-xxl:

        .btn-xxl {
          padding: 20px 26px;
          font-size: 35px;
          border-radius: 8px;
        }
    

    See the Pen Yellow Bootstrap Button XXL by Nicholas Cerminara (@ncerminara) on CodePen.

    Building a base CSS by extending the classes can prove to be extremely helpful in the long run and can really speed up your front-end development.

    box-sizing: border-box;

    My favorite thing about Bootstrap 3 versus 2 is that it adopted the new box-sizing: border-box property for all elements and pseudo-elements (:before and :after). This might be more obvious to some, but what this does is changes the way the CSS box-model works. When this is enabled the width and height properties include the padding and border, but not the margin. In laymen’s terms, if you add padding, your element isn’t going to grow in size. Instead, the element’s contents get pushed closer and closer towards the center of the box.

    Bootstrap 2 didn’t use this method, and I imagine people who recently switch will be thrown off by this since it goes against how most people are taught CSS in the first place. After you get used to it though, it starts to make responsive web development a lot easier and will probably be your new default even without Bootstrap. I think the idea to do it this way was first introduced by Paul Irish from this post. Here’s a demo explaining how it works if this is new to you:

    See the Pen Box Sizing Demo: Change the Padding with this Range Input by Nicholas Cerminara (@ncerminara) on CodePen.

    Your Respond.js include might be all wrong

    Respond.js is is an excellent polyfill for bringing media queries to legacy browsers (for this case, getting Bootstrap 3 to work with IE8). Making sure that respond.js is even actually working will make your cross-browser tests much easier. I learned that Respond.js can fail based on two things:

    1. Where it is located in the document
    2. If you’re loading your styles from a CDN

    Load respond.js after your CSS

    If for whatever reason you are loading respond.js before your styles, this will cause the polyfill to fail. You need to load respond.js after your styles. If you have inline styles, respond.js should technically be loaded after that as well.

    A CDN can create cross-domain errors

    Respond.js works by requesting a copy of your CSS via AJAX. If you have your CSS on a different domain, such as a CDN, per the security settings of browsers, it won’t be able to load the CSS assets. It’s recommended that you create a proxy page to enable cross-domain communication. You can read about doing that at their official docs. The quickest and easiest solution though is to just host the Bootstrap 3 assets and the Respond.js assets yourself (don’t use a CDN). This is a quick and easy fix that would work for most people. You should evaluate the pros and cons of ditching the CDN for your specific project since using the CDN has obvious performance benefits.

    Conclusion

    It’s all about using the right tool for the job. Sometimes Bootstrap will be a good choice for you, and other times it won’t be. The important thing to remember is that Bootstrap was built with extensibility in mind. You can pick and choose what pieces to use and which parts to use or build off from based on your needs. It’s not going to do all your front-end work for you, but it sure will make front-end development a whole lot easier.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Nicholas Cerminara

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel