UI Frameworks – Bootstrap
In this article, I’ll be explain what Bootstrap is and how you can use it to quickly help you produce a responsive website.
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.
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">
As you can see, there are four classes in this div:
col-xs-xxis used for small (mobile)
col-sm-xxis used for tablet
col-md-xxis used for small desktop
col-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.
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:
In your LESS file, you can attach the columns like this:
If you are using SASS, it looks like this:
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.
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.