Bootstrap Responsive Patterns

Bootstrap has been for a long time, the de facto framework for building responsive websites. However, if not used properly, then it might lead to very bad designs. In recent days, there have been inclusion of a lot of other front-end frameworks e.g. Material Design, and same time bootstrap has been evolved to simplify the development of responsive UIs.

As a developer, time to time, you might need to work on the UI part and though if that doesn’t seems interesting to you, it is a huge part of the whole application and the areas where user interaction is high, can be improved with bootstrap. In this post, I will try to talk about the structure of bootstrap in general and some responsive patterns which we can use.

Though I am using Bootstrap-4 for demo purpose, however, I try to stick to simple usage and the focus is to gain benefits with very small effort. Also, I am not a designer and this area is not my strongest suite, however, there are patterns in even doing the UI work and use of those patterns is not only interesting, but same time very easy and logical to follow. This will be a two part post, In this post, I will show the finished UI and talk about some of the responsive patterns, important bootstrap classes, themese and in upcoming post I will show you the actual mechanics of the implementation which is left out for now.

Finished User Interface

It is a single page UI and showing a simulation of vending machine. The layout is two column layout which changes to single-column on smallest device (mobile phones).

Responsive Patterns

Luke Wroblewski wrote an excellent post about Multi-Device Layout Patterns on the following link https://www.lukew.com/ff/entry.asp?1514 and there he described these patterns in great details. I am here just summarizing those patterns and then I will show you how you can implement those patterns in your applications.

Following are few of the responsive patterns from Luke’s post and a simple description of those. We can implement these using bootstrap framework.

• Mostly Fluid
  • in this pattern page design keeps its form for the most sizes. The page only change its layout for the smallest smart-phone sizes.
• Column-Drop
  • As screen size gets smaller, column starts dropping and getting stacked vertically one by one.
• Layout Shifter
  • This is where the page layout changes significantly from one form-factor to next.
• Content Reflow
  • This pattern is not for entire page, but for a single page element.

Bootstrap’s Grid Classes

• .container, .container-fluid
  • First of all, every thing needs to happen within a container. So, we can use .container class and assign that to the body or to some other div or grouping element.
  • The primary difference b/w two classes is that the .container-fluid is going to take up the full-width of the browser or viewport.
  • With .container bootstrap will try to center the content of desktop, large browser or laptop within the viewport.

• •row
  • Inside of container, we’re going to need another div or some other grouping element that has a class of .row. We can have several rows per container.
  • Row is where we have our 12-column grid. It is important when we are working in a row that all columns add up to 12.
  • .col-sm-4: class that is used to spread out a visual DOM element across those columns.

Visual Break-Points

• .col-sm-4: you notice sm there; that’s called visual break point.
• There are 4 visual break-points

Usage

Mostly Fluid Pattern (Implementation)

So, what we have built so far is Mostly Fluid pattern. The website is fluid all the way down to the smallest screen size.

Bootstrap’s Themes

You can also use various bootstrap theme which are available on the internet. One place to get free bootstrap themes is https://bootswatch.com/.

I downloaded and added the reference of bootstrap theme(s) to the index.html and following was the immediate effect.

Here is the change I made to index.html to apply those themes.

Summary

• We can implement responsive patterns using bootstrap framework.
• For a detailed insight of these pattern, check Luke’s website link mentioned above.
• Bootstrap has a grid-system, visual breakpoints, classes etc which can help us to design responsive websites and implement responsive patterns.
• We can download bootstrap themes and apply those very easily to our website.

Also, in the sample application, I used media queries and other custom css classes, I will talk about those in next post. To know more about bootstrap itself, you can check the official website and there are tons of tutorials, important thing is to know about these responsive patterns and implement those as needed in your website. Bootstrap will do most of the heavy lifting we just need to know how to use its tools. Also let me know if something is not clear or you need more information, till next post, Happy Coding.

References

• https://bootswatch.com/
• https://getbootstrap.com/