Bootstrap is an extremely powerful front end framework that can be used to help create beautifully responsive web designs. As part of a team of six, we won Hack to Help Hampton Roads where we created a front facing web app that users would be able to explore the Hampton Roads Area. After winning, my team and I decided that the site we created needed some serious UI redesign. We were confronted with several questions:
All of the answers to these questions led us down the path toward using Bootstrap as our front end framework. This seemed to be our best choice given how easy it would be to deploy, how user friendly it would be and how quickly we could become familiar enough to code in it.
While I didn’t setup Bootstrap the first time I worked with it, I later set it up for some students during a student Hackathon. That was when I realized just how easy it was to deploy a site using Bootstrap. After you have downloaded the package, you can either begin coding a fully customized site or find a template you like and grab the source code to modify to your needs. I recommend starting with a template as long as it’s similar to the design you want.
There is a bit of a learning curve when it comes to coding on Bootstrap. The biggest thing to remember when working with Bootstrap is that everything is divided into Columns, Rows and Containers. This is what makes up their appropriately named, Grid System. Each page is made up of a container that has 12 columns and any number of rows. For each piece of content, you define how many columns it will span. Below is a diagram defining the columns and how offsetting the elements works:
The entire page here would be a container, each line a row, and each box would fall within the columns of the page.
There are countless options that come built in with Bootstrap, but knowing and understanding the grid system is paramount to getting up and running.
For example, if I wanted my first piece of content to span 8 columns and the second to span 4, my code would look like this:
<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div>
to give the desired output of:
I could give you a full description, but you can find everything in Bootstrap’s easy to use documentation.
Once you get the basics of Bootstrap’s formatting, it’s pretty easy to use the documentation to achieve your goals. However, as with learning anything new you will inevitably face challenges. Perhaps the most challenging thing I’ve encountered in working with Bootstrap is in working with the built in navigation bars. Nav bars can always be challenging when working in a responsive environment. Working with the Bootstrap documentation and Google searching what others had done to accomplish my goals helped me to meet the end result I desired. Eventually I was able to dock a navigation bar at the footer of the page to show some page navigation links.
Some of my successes came from using the awesome features offered with Bootstrap. One of the most convenient things I think Bootstrap offers is the built in Glyphicons. This made it easy to add icons to menu items and buttons. In this example, the magnifying glass is a built in Glyphicon:
The greatest success I gained from working with Bootstrap is a website that is fully responsive. Menus collapse to hamburger menus. Columns adjust until they need to be layered. All of this was done with very little effort on my part, only a few selectors used to define the column spans for each device size.