UI Frameworks – Bootstrap

We published this a long time ago…

Some of the content in this post might be out of date, and some images and links may no longer work.

Discover who we are and how we may be able to help you today:

In this article, I’ll be explain what Bootstrap is and how you can use it to quickly help you produce a responsive website.

About Bootstrap

To quote the Bootstrap website:

“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.”

Setting up Bootstrap

Setting up Bootstrap is relatively simple; you can either download it from GitHub, or you can download from Bower via the command line. Bootstrap comes in two variants – one for SASS and one for LESS. Bootstrap also comes with reusable JS components such as a drop-down menu, modals and tool tips. To do this, you must include the Bootstrap JS files.

Using Bootstrap

To use Bootstrap in your website, include the compiled bootstrap.css file and the compiled JS file; this will now allow you to access the HTML mark-up and JS components, allowing you to build a responsive layout using Bootstrap.

Building the responsive interface

Building a responsive interface using Bootstrap is relatively straightforward. By default, the grid is 12 columns; with 15 pixels either side. The gutter is, by default, set to 30 px (this is divided by half, so it gives you 15 px of padding either side of a column). All this can, however, be customised using the Customise page right on the Bootstrap page.

The main thing to bear in mind with regard to responsive interfaces is that Bootstrap adopts four breakpoints. These are:

Small – anything from tablet below 768 px
Tablet – anything above 768 px and below 992 px
Small Desktop – anything about 992 px and below 1200 px
Large Desktop – anything above 1200 px

Bootstrap is mobile-first – by default, your stylesheet is set to mobile (so there will be no media query).

The Bootstrap grid

So, as explained above, Bootstrap comes up with four breakpoints. As we have already added the bootstrap.css to our website, this gives us access to the grid markup which we use to build a responsive interface.

Let’s look at a code example:

<div class="col-xs-12 col-sm-6 col-md-3"> <p>Hello</p> </div>

As you can see, there are four classes in this div:

col-xs-xx is used for small (mobile)
col-sm-xx is used for tablet
col-md-xx is used for small desktop
col-lg-xx is used for large desktop

In this example, if you viewed this in your browser, this would be 12 columns on Mobile (100% width), six columns on Tablet (50% width), four columns on Small Desktop (33% width) and two columns on Large Desktop (16% width). Most of the time, Small and Large Desktop tend to be the same. If this is the case, you wouldn’t need to mention col-lg-2, as Bootstrap uses minimum width media queries.

Using these grid frameworks can help a UI developer to quickly build a responsive interface. However, it can be cumbersome in terms of HTML mark-up, but there is another way to declare columns using the CSS method.

CSS Method

Using the CSS method allows us to take away specifying columns in the HTML. Instead, Bootstrap comes with Mixins, which can be added to your SASS or LESS file, so we can now can change the above example to this in the HTML:

<div class="my-column">Hello</div>

In your LESS file, you can attach the columns like this:

.my-column { .make-xs-column(12); .make-sm-column(6); .make-md-column(4); .make-lg-column(2); }

If you are using SASS, it looks like this:

.my-column { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4); @include make-lg-column(2); }

By using the CSS method, it decouples the presentation of the website from the HTML mark-up, allowing you to effortlessly alter your responsive layout to your needs.

Bootstrap disadvantages

As with all frameworks, there are some disadvantages. Whilst it’s quick and comes with a whole hosts of mixins allowing you to build a responsive website quickly, it also comes with a lot of bloat, so it’s important to use the customiser to only download the essential components you need for your website.

Bootstrap only breaks to four media breakpoints, meaning that if someone resizes the browser, it snaps to these four breakpoints rather than the interface adapting to the width of the browser.

The current trend for responsive web design is to create breakpoints as soon as the content breaks. If you need your website to do this, it’s better to use a grid framework such as Susy or Breakpoint to define your own media query breakpoints; this is now our preferred method of responsive web design.

If you’d like to know more, take a look at “Breaking Away from Bootstrap” and, from a design perspective, “The Challenges of creating a fluid website design”. Bootstrap, however remains a popular choice and the next version of Bootstrap 4 should continue its success over the next few years.

Conclusion

Bootstrap allows an UI developer to quickly build a responsive web interface using their grid mark-up system, which can either be added in HTML or as a mixin in a SASS or LESS file. This will work well on most mobile and tablet screens, as well as on responsive devices. Bootstrap also allows you to add JavaScript components such as pre-built drop-down modals and tooltips effortlessly without requiring you to add your own script. There are disadvantages just like with any other major framework, but if you are getting into responsive, then this is the ideal framework to use.