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-xxis used for small (mobile)col-sm-xxis used for tabletcol-md-xxis used for small desktopcol-lg-xxis 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.