Bootstrap 3 – Tips and Tricks

Introduction

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive projects on the web especially for mobile, making front-end web development job faster and a lot easier. But, how many of us know the feature benefits of Bootstrap? Hence, this article is aimed to unveil those secrets of Bootstrap’s extensive capabilities. It is a handy tool for techies of varying skill levels, for devices of all shapes and sizes, and for projects of all sizes.

Bootstrap’s architectural framework is based on HTML and CSS design templates making it useful for typography, forms, buttons, tables, navigation, modals, image carousels and many other including optional JavaScript plugins. Bootstrap’s ability to easily create responsive designs is yet another interesting feature.

Use case

There might be programming contexts when you intend to use your own custom CSS and JavaScript code to develop sites or application, without even realizing the mighty capabilities of bootstrap which could have eased your task thus saving time.

Certain things are mandatory or optional before you begin to create the website – five columns layout, hover dropdown, column ordering and so on. Now, here is the good news!!! You need not create a custom code for all these tasks. We shall provide the readymade bootstrap code thus helping you to save your valuable development time.

The prime motive of this article is to share our learned knowledge about bootstrap and exhibit the framework’s capabilities:

• Five columns Layout
• How to Enable Bootstrap 3 Hover Dropdowns
• Don’t forget Container Fluid for Full Width Rows
• Column ordering
• Labels for Screen Readers
• No Gutter Column

Solution

Five columns Layout

Bootstrap does not provide any grid system by default that allows us to create five columns layout, but I can assure its simplicity.

This is the most advanced solution since it works smoothly with Bootstrap 3. Reusing classes conjointly with the current Bootstrap classes for responsive design is possible.

Initially, you need to create a default column definition in a similar method as Bootstrap does it. Call them col-*-5ths to avoid chaos with other names. Next, define the width of new classes, if media queries are different.

CSS:

Add this to your global stylesheet, or even to the bottom of your Bootstrap.css document.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Sample HTML:

For instance, if you want to create a div element typical to a five column layout on medium screens and two columns on smaller ones, just use a similar code below:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

How to Enable Bootstrap 3 Hover Dropdowns

The default navigation behaviour of Bootstrap does not have out-of-the-box hover dropdowns and the mobile menu is pretty boring. Still, if you prefer using it, here are some tricks to fine tune without complete customization.

Some clients, sites, or apps will expect you to have hover dropdowns on desktop. As seen below, this is never available 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 makes the dropdowns show all independently without leading you to the parent link on mouse click. Though not the most ideal solution, the following javaScript (jQuery) may help you achieve desired results:

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

Don’t forget Container Fluid for Full Width Rows

During the first instance of using Bootstrap 3, we did not use the container-fluid class for full width rows. If that was our requirement, then we would have simply omitted the container. This makes sense and the grid system tends to work without it. But, it is problematic because Bootstrap’s row class has a -15px left and right margin.

Please find an example below to know more:

Note: You may view in a full window to understand better.

Column ordering

Alter the order of the grid columns with .col-md-push-* and .col-md-pull-* classes:

The push class will move columns to the right while the pull class will move columns to the left.

The order of the columns in your HTML mark-up should be as expected in mobile displays. This also signifies that the pushing and pulling is done on the larger desktop views.
Let’s study the following example:

We have two columns of equal width which will be pushed and pulled on sm or larger viewports.

<div class="row">
  <div class="col-sm-6 col-sm-push-6">
    <!-- Column A -->
  </div>
  <div class="col-sm-6 col-sm-pull-6">
    <!-- Column B -->
  </div>
</div>

On the larger desktop views (sm or larger) the columns are pushed and pulled.

On the mobile view (xs) the columns are fetched in the natural order of the markup.

Labels for Screen Readers

Using placeholders for your input fields is usually the best practice to even add a hidden label for the input, so that screen readers can read the page.

The following example helps us to understand how to set that up fast 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">

No Gutter Column

Bootstrap facilitates customizing and compiling your own build based on your requirements. This is anything from colors, container sizes, and to gutter padding size. However, sometimes you might encounter an instance where you just want a single row without padding. In most cases, you will just select the column individually and get rid of the padding with CSS. You can build your own utility class helper to achieve this. This utility class will cover all column sizes and still supports full responsiveness.

Take a look at CSS snippet below:

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

And this is 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>

Conclusion

• Bootstrap is a powerful front-end framework with extensive featured tools that speeds up tasks saving your time
• You can selectively use any piece and part or build off based on your usage to ease your front-end job, though bootstrap cannot be relied for the entire job
• It may not offer solution for all client requirements where some own coding might be required for task completion
• You can try the code tips from this blog article in your own code based on your needs
• Hope front-end developers gained insight into the unknown facts about bootstrap’s wonderful features.

References

• http://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know
• https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know