Well, as you would expect we will go even deeper into the code of Bootstrap and check out some interesting and common situations/problems/solutions/hacks/tricks that you will eventually run into if you spent more than a week with Bootstrap.

Side Note: we are going to be dealing with CSS things mostly in this article and in a new one (you hear that right) we are going to go bones deep with Bootstraps JS plugins.

The State of the (Responsive) Web

For a second there last year someone might have argued that responsive design is not going to be a big thing and it's going to be something that will pass and maybe not be hot for a long time so there would be no need to learn anything about it. Well son, you just got played!

Responsive design is here to stay and it's not going anywhere anytime soon. You can see the proof anywhere you look around the web, news portals, magazines, web apps, CMSes, personal portfolios are riding the responsive train. As a matter of fact the only thing that surprises me is that Facebook is still not giving up and that none of the development and design companies/agencies are marketing and offering responsive design on the websites and to their clients which is really a big miss by all of them.

In light of the responsive web, Bootstrap became even more popular, and from what I saw is almost a de facto standard for creating websites today. Here at Flip.hr we had a lot of clients requesting a Bootstrap code base themselves for various projects we built for them. From what we see Bootstrap is not going anywhere, and we are all awaiting the 3.0 release which will bring some more great stuff for all of you.

Let's Start at the Top

It's pretty logical that you would start building a website top to bottom, in case you don't - well maybe you should reconsider. Anyhow, the most common component of most websites is the main menu or navbar or navigation or however you want to call it. Generally it's very important that you have a good navbar so people can easily move around your website and find content that you offer or have on your website.

One of the challenges with responsive design is to have a good and consistent navbar experience across all devices and resolutions. Sometimes you have a lot of items in your menu and sometimes you only have a few, so before you get started you should think about what are the most important things on your website and how can you scale down from a large screen to the iPhone, because, we all know, planning is key to success. The most popular solution to this problem nowadays is to “collapse” or “hide” the navbar items on mobile phones and tablets, and guess what - it's exactly what Bootstrap does.

Let There be a Navbar

The Bootstrap guys were so nice that they made a component for this called "Navbar". So if you go to Bootstrap docs (which I urge you to at least glance at before continuing to read) you will see that they predicted and pre-made a lot of common elements that you might see in a navbar like: search bar, branding information, dropdowns, top/bottom/static navbars and finally a responsive navbar.

It might seem like a lot of code to write for a navbar but here's why:

<div class="navbar"></div> - this is basically a container for your navbar which keeps everything inside it safely wrapped. Depending on your needs you will find yourself adding more classes to this DIV like for instance:

.navbar-fixed-top - if you want your navbar to stick to the top at all times even when you scroll down. Note: if you plan to have a fixed top menu you should add 40px of top padding to the body of your website because the min-height of the .navbar-inner element is 40px and I presume you don't want your navbar overlaying some important content in the body.

.navbar-fixed-bottom - if your prefer the navbar to always be at the bottom of your page

.navbar-inverse - if you want to give your navbar a black look instead of the default greyish type which I am not a big fan of by the way

<div> class="navbar-inner"></div> - this div container will take care of clearing the floats to make sure things always display properly, take care of the content before and after the DIV but also apply some styling by default: gradient, box-shadow, min-heights and so on.

<div> class="container"></div> - this one hopefully sounds familiar if you have worked with Bootstrap before. This container is responsible for changing the width of the menu aka making it responsive, as well as clearing the floats and the content before and after the div. By default the container width is set to 1170px and it goes down to 940px and after that it will "collapse" to 100% of width, hide all the menu items and display a little icon to the right side of the navbar where you can click to show or hide the menu. This a popular way of having a responsive and clean navbar without any hassle on any screen size.

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> - this href element is the little icon for toggling the menu after it collapses. By default it will display three horizontal lines (<span class="icon-bar"></span>) which indicates to the user that he can click on them to collapse the menu. Mostly developers add text to icon like “MENU” or something to make it even more clean.

<div class="nav-collapse collapse"></div> - a container for your menu items and everything that you want to collapse after a certain screen size. So if you want to hide something on a tablet you would put it here.

<ul class="nav"></ul> - a basic Unordered List element that will contain all the list items of the menu. By default Bootstrap applies some styles to it like color, padding and similar. You can change all of this as you wish.

With this code alone you will be able to do a lot of cool stuff and you'll have one thing less to worry about. But there are times when you don't want to collapse the menu on iPad portrait or maybe a smaller tablet like Nexus 7. So how can you trick Bootstrap to not hide the navbar items on certain resolutions?

Well the answer is a media query that would contain some rules to undo Bootstrap's default behavior.

VOILA. The navbar will now not collapse the UL elements and instead it'll show them all without hiding anything like you were on a larger screen. From this little snippet of code you can see that we are targeting devices with a max width of 767px and we have mostly reversed the Bootstrap code like: canceling clears on .nav-collapse and making its height default to auto, hiding the .btn-navbar element which contains those three little horizontal lines we talked about above and adding float to navbar elements because by default Bootstrap sets them to float: none.

With this snippet now you can decide when to actually collapse/not collapse the menu because if you have 5 items in the menu you might not want to collapse them on tablets but collapse them on phones.

Bootstrap handles the navbar pretty good but sometimes you want to push the limits of it and make something completely different. In that case you can use a combination of some of the Bootstrap elements but for instance ditch the “container” part of the navbar and write your own thing. This is exactly what we did on our website flip.hr. Our menu items are around 20% width and we have 5 menu items with a fluid layout. So we used the navbar with our custom size without collapsing anything so you always have the same experience. You have to play a lot with the font-size, paddings and so on but a lot can be done by combining some code and imagination.

Extending the Navbar

With Bootstrap you can add some cool, predefined, elements and components to your navbar making it very easy to prototype and test things out. So here are 3 more components of the navbar:

1. Dropdowns
Probably the most common component you'll find yourself using in the navbar and the most helpful one because it can help you to better group and organize your menu items making the whole experience more user friendly. So if we take a look at the same code we had before and change the fourth item in the navbar to have a dropdown menu the code will look like this:

The first thing you want to do if you are going to have a dropdown is to add the .dropdown class to the <li> element that will contain the dropdown.

Next you have to add a class to the href element called dropdown-toggle and an HTML5 data attribute called data-toggle with the value of dropdown. And by default in Bootstrap examples after you have your link text you will see this: <b class="caret"></b> which is basically just a little indicator to the user that there will be some more options to this menu item. You can remove this piece of code if you don’t think you need it.

After all of this you will have a standard unordered list element with all the list items you need in your dropdown. Bootstrap was so nice to include some handy list elements like <li class="divider"></li> which will basically create a horizontal line making the list items before and after easily and visually separated. Another cool thing are nav headers which visually let you group dropdown list elements by just adding a <li class="nav-header">Items header</li> before a list of items that you might think deserve a header.

2. Search
Search might be a pretty common thing in the navbar, especially the search form. Bootstrap's got you covered here in terms of quickly adding a search form with this snippet of code:

Just place this 3 line snippet in the <div class="nav-collapse"></div> usually right after your main unordered list (<ul class="nav"></ul>) and you are good to go. You can add some helper classes to the navbar-search like pull-left or pull-right to make the form float left or right from your menu items. But basically this is pretty much it.

For now we'll let you try all of this and in my next article we'll add the Bootstrap Typeahead plugin to this very same search form.

Both of these come in the main Bootstrap JS file if you download the whole thing at once which I suggest you do.

Don't forget that by default all Bootstrap dropdowns are triggered ON CLICK not ON HOVER which is a big problem for some and a blessing for others. Keep in mind that you want be able to switch from click to hover with the default Bootstrap JS and you’ll have to hack your way around in JavaScript or use this cool little plugin and ease your pain:

Just include the plugin and change a few things in the code as instructed and you're there.

Remember: having a good navbar experience is essential for your website, and no tool will be able to help you out with this if you don't sit down and think about what are the most important things to have there and how will users use it. Be sure to plan ahead and try multiple variations but always try to keep it somewhat consistent so that the user doesn't have to look for the navbar if he visits your website from a mobile phone.

Forms All Mighty

It seemed logical to continue this article with forms, because after the navbar it's one of the most common things developers use on websites, almost everybody will have some kind of a contact form on their website and a lot of them a login/registration form. If you are building a CMS solution or some kind of a service/web app, forms are an essential part of your UI, design and code.

Bootstrap comes with a handful of classes and helpers to get you up and running quickly with forms. Forms might actually be the most extensive section of Bootstrap because it really comes with a lot of great stuff.

There are a few basic styles:

1. Inline Forms
You could find yourself using this with smaller and shorter forms like login sections or registration sections because all elements have display: inline-block to them which means they will be in the same row, plus all form labels are left aligned. If you want to use this just add a f.orm-inline class to your standard HTML form and it's done.

2. Horizontal Forms
Horizontal forms are very different from the basic inline forms and they require a lot more markup but you will find yourself using horizontal forms more often than inline forms. The basic look is that all labels are right aligned and floated to the left so you get a more robust and cleaner look to them than the inline forms.

As you can see from the code there are two things popping out that you need to remember as you will use them all the time:

<div class="control-group"></div> - this container will hold all your label and form inputs in a new row, clearing all floats and it will add a default 20px margin to the bottom so one group of items is visually separated from the other group of items. Inside of the control-group you will see a form label element which will be floated to the left and the text will be align to the right with the default width of 160px.

<div class="controls"></div> - now the .controls class will usually hold your input elements or buttons. It's important to remember that by default it has a right margin of 180px and this is because the <label> element inside the control-group has a width of 160px so unless we add a right margin to it we won't be able to see the labels themselves.

3. The Unofficial Way
So this is something you won't find in the Bootstrap docs so keep in mind that it is my preference and I use this mostly because I want my labels to be in their own row and my input elements to be in their own row as I think it’s the most widespread use case scenario and it really makes the form as clear as it can be. So let's see an example of this with a basic contact form:

In case you don't spot the differences I just use almost the same code as the Horizontal forms without actually adding a class .form-horizontal and without adding a class .control-label to form labels. This allows me to have all labels and inputs as display: block without floating or anything but I get to keep the nice visual separation of control groups, labels and their inputs. Another good side of this way is that it allows me to have help blocks under form inputs and more extensive and cleaner validation of form elements.

Like I said, since this is not official I won't tell you you have to use this or learn this but this is something I find myself using most of the time so I decided to share in case somebody wants to use it this way.

Sizing the Inputs

A lot of times you want to control the width of the input element and its “importance” in a way by making it bigger or smaller. So here is how you can do it with Bootstrap:

1. Relative Sizing
With this type of form input sizing you add special classes that will determine the width of the form input element in pixels. A list of all available classes is:

This way you can add classes to input elements that you want and they will be sized according to Bootstrap's definitions of that class.

I have to admit that I have never used this way of sizing form inputs as I think that the "Grid column sizing" method is far better and easier to remember as it's the same class names as column sizes, plus it's easier to do simple math than to remember the exact sizing in pixels for each class.

2. Grid Column Sizing
This is the way I prefer to size form inputs as it's a lot easier to remember and calculate and it just feels more native to Bootstrap (I might be mistaken). In this way you use the same classes that you use to determine the width of columns in Bootstrap and that is by adding span* (span2, span6, span4 etc).

Most of the time I just find myself using the full width of the form input, so in this case you would add something like .span12 to the input element and it will simply spread from the start of the row to the end of the row which is very cool.

I just want to point out here that if you are using a fixed layout then the maximum form input width should be the same as your parent column container. To illustrate this we will use the contact form example from above:

As you can see I wrapped my form inside of a .span6 column and it's important to note that all input elements have .span6 (or smaller) classes as well.

So just remember if you are using a fixed layout you have to use the maximum column width and if you are using a fluid layout it doesn't matter, your column can be .span6 and your form elements will be .span12 if you want them at full width.

Custom Containers

When I was starting out with Bootstrap sometimes it got frustrating when I got a 960px or 980px wide design because I thought "why i only have 940px, 1170px or fluid layout how am I going to pull it out" and all the other panic questions. Turns out it's very simple to use whatever container width you want and still get all the sweet things that Bootstrap offers. So here is the magical snippet of CSS code:

.custom-container {
max-width: 960px;
margin: 0 auto;
}

It's true, this is all the code you need to set up your custom container width. It's important to note that you have to use fluid layout tags inside the custom container like this:

As you can see we didn't use .container or .container-fluid but our own .custom-container and inside it we just used the .row-fluid tag with some .span6 tags and we have what we need. You can use custom containers this way just remember that you are working with percentage values not pixels.

Hacking the Layout

There are moments (a lot of them) when things simply don't order, shift or display exactly as you want them to when you are sizing down to an iPad portrait level or similar. And I always found it "unholy" to mess with the Bootstrap grid sizes and break it apart or re-order it as I please. But guess what: you sometimes have to!

I'll walk you through a scenario with a thumbnail list where we start off with 4 thumbs on a large screen and as we progress down instead of getting them abnormally small or abnormally large by using the full width of the screen, we will break the 4 grids into two and then into one.

Now we have 4 thumbnails in one row on large screens and laptops, and that's all fine but if you resize your browser or come visit this on a screen that is below 767px you will see one thumbnail in a row with a lot of blank space to the right of it, and this will be the same for all sizes below 767px except the blank space on the right side would be reduced as we resize to a smaller size.

As you can see this experience sucks for tablet devices (not all but most), plus it kind of sucks on some larger phones and the iPhone because there is too much white space on the right side. So let's add some CSS to fix this problem:

Now that looks more acceptable and more fluent. Plus if you take a look at the amount of CSS code that we added it's totally worth it. So I targeted two screen sizes that suit me best, and where I saw things were breaking.

The first media query is the tablet size, which is just a pixel shy of Bootstrap's default 768px breakpoint. So starting from 767px the .thumbnails list will have left and right margins set to auto so it's always nice and centered and we should give it a max width of something so it can actually center. After that all li items will float to the left, have 10px of left margin and be 220px wide. This will override the default Bootstrap style where all li elements just go to 100% and are each displayed in their own row creating a gazillion pixels of white space to the right.

The second media query will start when we hit 499px of max width, this will include iPhones and some larger phones. Since CSS properties are inherited from our last media query we have to overrule them and set some new ones. This time since it's kind of a smaller screen, we need the thumbnails to be displayed in rows, one below the other so that's why we put the max width to 100%, remove the floats and add some centering just to fill in the white space gaps equally on all sides.

And that's all we have to to, to make this layout act more natural and make the transitions more seamless. We could have added some CSS transitions to them to make it even nicer.

Now you have no reason not to use your own custom media queries and define stuff as it best pleases you. Bootstrap is a great tool to use but don't be afraid to extend it as you please and adjust the things that need adjusting in order to get the maximum results.

Last Minute Tips

1. Just Please Use Font-Awesome

I see this all the time and it kind of annoys me. Most developers use the default icons that come with Bootstrap. And they are nice, yes! But they are images, and they can only be scaled to a certain size, you can't scale them to 128px and give them a red color. They are only images.

Instead just use Font Awesome. This is an icon font that contains all the Bootstrap icons plus so much more in one package. And guess what, you can scale them to whatever size you want because they are vectors. You embed them as a web-font with just one line of CSS and you can apply font-size to them, color and everything else you want just with the power of CSS.

2. Don't Edit the Bootstrap CSS File Directly

I'm not saying all of you do this but I actually saw that quite a few people do, so I just want to remind them that you don't have to edit the bootstrap.css file. Don't change widths, colors, shadows there. Leave that file be, because if a new version of Bootstrap comes out you'll have to do it all over again. Instead what you can do is either download a customized Bootstrap build or even better do what we all do: include the Bootstrap CSS file first, then after that include your own stylesheet where you can override all Bootstrap rules if you want and change them to whatever you want. You can target them directly or you can add your own ID's and classes and style them.

3. Don't Blame Bootstrap For Your Lack of Design Skills or CSS Skills

Bootstrap gives you a lot of things that you would otherwise spend days coding for each project. It comes with a really decent design layout, if you don't touch anything you will be able to test and prototype out of the box. But understand that building a website does not mean having a default Bootstrap design, nor does it mean that if you create something like the following screenshot, that Bootstrap is to blame. Use it wisely and to your advantage.

Next time we will have fun with some of the most popular Bootstrap JS plugins. So do check back soon.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.

Vendran is a young guy from Croatia who is passionate about front-end development and web. He enjoys creating awesome front-end code and user experiences. He is also fluent with PHP and MYSQL and basically all-in-one guy for everything web.