Bootstrap: The gosh darn easiest framework ever

About a month ago I published a post talking about how I have never used a framework before and that I have chosen to learn two of them: Bootstrap, and Foundation. Since then, I’ve been working with Bootstrap 3.3.7 as the framework of choice for my college final project, and so far I’ve come to the conclusion that it’s easy-peasy. Some things are a bit iffy because we have some of our own custom made style sheets that are supposed to work in conjunction with Bootstrap… but, despite these strange happenings, I am completely in love with this framework.

I actually didn’t expect Bootstrap to be as easy as it turned out to be, but after 2 weeks of using it with no prior framework experience, I think it’s safe to say that it lives up to what the media says.

So let’s get down to it. Here is what I initially assumed about frameworks (and more specifically Bootstrap):

  1. It will make my life easier because I don’t have to think about responsiveness
  2. Bootstrap is so popular that I can just find the answers to my questions online
  3. It’s complicated to install
  4. That’s about it

And here is what I learned:

It saved me crazy amounts of time

Before using Bootstrap, I would spend hours on the layout and style of one web page. With bootstrap I just dropped in a couple divs here and there and everything magically worked on all mediums: desktop, tablet, and phone.

Success, info, warning, and danger buttons from v3.3.7 (code snippet below)

You want a button that looks really nice? Easy, just add in their pre-built classes and boom: a beautiful button.

<input class=”btn btn-success btn-xs” type=”submit” value=”Lawful good” /> 
<input class=”btn btn-info btn-sm” type=”submit” value=”True neutral” />
<input class=”btn btn-warning btn-md” type=”submit” value=”Neutral good” />
<input class=”btn btn-danger btn-lg” type=”submit” value=”Lawful evil” />

In my previous blog post I mentioned that I would be building a quick web app to see how Bootstrap worked compared to regular CSS. So I made a super quick website to show you a bit about the main components of Bootstrap and where it excels.

Super basic index page with two columns and a static nav bar. The red lines signify where the rows and columns are. Rows go first, and then columns fill the rows. In this scenario, the hierarchy is as follows: container > row > 2 columns > row in the right column at the bottom > 2 columns

Here I just threw in a navigation bar that is static and collapses when the view-port gets smaller. I also put in several columns filled with lorem ipsum. This process took me about 15 — most of which was spent finding a lorem ipsum generator that didn’t suck. This was also the first time that I have ever used <pre>, <mark> and <code> tags so I’m insanely excited to know that those exist and look gorgeous when styled with Bootstrap. If I had wanted to achieve a look like that, I would have manually created a style for it; my eyes have been opened! (a screenshot of the code used for this can be found at the bottom of this post)

Bootstrap comes with numerous components that help you to meet your styling needs; so many in fact that I can’t display them all without making the page look overloaded. Some of the components that I’ve put into my final project are Bootstrap’s forms, alerts, and library of glyphicons.

Bootstrap also has fantastic table styling; and I hate table styling! It takes all of the hard work out of fudging around to make tables look “not terrible.” A couple of days ago I found this beautiful plugin that worked with Bootstrap’s UI and created searchable and sortable tables with the added bonus of having built in pagination. This plugin is called DataTables, and it made my life a breeze— that is once I figured out the ordering of the DataTables scripts and the Bootstrap scripts.

A simple Bootstrap table with no class other than <table class = “table table-striped”>

I honestly cannot get over how I have gone my entire web “career” and never once used frameworks. As much as I appreciate the skill behind manual design and the thought process behind all of a div’s attributes, I’ve already been converted over to frameworks — or at least Bootstrap.

You can find the answer to practically any question you have regarding Bootstrap

The only problems that I’ve come across with Bootstrap were problems related to implementing a jQuery plugin or trying to get short columns to fill the taller parent row div (which I still can’t figure out). When you have questions about what components you can add and what their syntax is, the official Bootstrap website and W3schools’ section on Bootstrap are there to help. These two websites were so helpful that I actually visited them more times than visiting Stack Overflow (wow!). I have never spent so little time googling to find solutions to layout issues.

When you “download” Bootstrap, you’re just downloading a couple CSS and jQuery files

For my final project, I’m working in a group. While I was busy doing documentation, another group member set up the environment on Netbeans and created the design using Bootstrap. So for about a month I didn’t touch the front end and had no idea how he implemented Bootstrap. When you download Bootstrap v3.3.7, this is what you get in the ZIP:

What you get in the ZIP folder, and how I have it laid out in NetBeans

And that’s all. You can plop these into your project anywhere and link to them just like a normal stylesheet or script file. Also in case you’re not familiar with .min and .map, here is a definition that explains it very clearly (because I didn’t know either):

Source Maps from preprocessors cause [Chrome] DevTools to load your original files in addition to your minified ones. You then use the originals to set breakpoints and step through code. Meanwhile, Chrome is actually running your minified code. This gives you the illusion of running a development site in production. —
To access DevTools, right click in Chrome and click “Inspect” or hit Ctrl+Shift+I

Bootstrap is so simple it’s silly

After using Bootstrap on a full-fledged web app in school and understanding how easy it is to install and find help for, I don’t expect to go back to manual CSS coding ever again. I mean yes I’ll use my own style sheets alongside Bootstrap because I do need the odd modification here and there; but using this framework simply for navigation and column control has blown me away.

My next blog post will be talking about the Foundation framework. I’m hoping that Foundation gives me the same ease of use as Bootstrap when it comes to responsive divs, but more customization so that the styling of my web app doesn’t look as cookie cutter as every other Bootstrap site.

Below is the code that I used for my basic web layout in the above post.