Getting started with Bootstrap customization and responsive design

Recently I’ve been using a really awesome framework called Bootstrap to put small websites together. In this article, I’m going to guide you through the basics of the Bootstrap installation process, and how the Bootstrap framework can be customized for a responsive web design.

Why Bootstrap?

Bootstrap is a framework that provides an easy-to-use 12-column grid system for a 940 pixel wide container as well as a fluid layout grid that adjusts to the size of a browser. Included in the framework are customizable, well documented features—such as dropdown menus, buttons, tabs, breadcrumbs, modals, tooltips, and carousels—that can be implemented without any handwritten JavaScript.

To put the benefit of using Bootstrap into perspective, consider how you go about building a website. You probably start by defining a site map and organizing how your pages are going to link to one another. Then you move on to designing the structure of your pages and organizing your content into modules, such as navigation and maybe a hero unit where you can highlight key content. Then you decide how many columns you need for your content, or if you’re into responsive design, you start building column structures for different device sizes and orientations.

Imagine how much quicker and easier your web build could be if you used Bootstrap to help you organize everything from designing site structure to defining site maps and building column structures.

Let’s do this: Getting started on the Bootstrap web build

Installing the Bootstrap framework is pretty easy. Start by heading over to the Bootstrap website, and clicking on the Download Bootstrap button.

Once your download is complete and decompressed, you’ll have a folder called Bootstrap. Inside that folder, you’ll see CSS, IMG, and JS folders. The IMG folder has a sprite with all of the images used by Bootstrap. You won’t need to mess with that folder.

In the other folders, you’ll see two versions of each file: a .min version and a regular version. The .min files have been compressed as small as possible. If you plan to customize the CSS or JavaScript files yourself, use the regular versions; otherwise, use the .min versions. You should delete whichever version you don’t plan to use. If you use the .min versions, then rename the files (deleting the .min part). For this example build, I want to be able to modify my style sheets, so I’ll use the regular version and delete the .min versions.

The CSS file for Bootstrap comes in two flavors: a regular version (bootstrap.css) and a responsive version (-responsive). The responsive CSS gives you additional features such as a default class for tablets and other mobile devices. You should only add the responsive CSS version if you need those features. Read the responsive documentation on the Bootstrap scaffolding page if you have any questions,.

Downloading jQuery

The Bootstrap library requires jQuery in order to work, but doesn’t come with it. To download jQuery, visit the jQuery website and click on the Download button. If you see a page with a bunch of code after you click the Download button, you should navigate to File > Save Page As (I’m using Google Chrome as my browser so this might have a different name on your browser).

Rename it jquery.js, and put it inside the JS folder with the bootstrap.js file.

Using Bootstrap example templates

For our project, we’re going to start with one of the Bootstrap example templates from GitHub. Be aware that these templates are only intended to familiarize you with the Bootstrap framework and they should not be used as final projects. For our project, we’ll use the [basic marketing example file] (http://twitter.github.com/bootstrap/examples/hero.html).

With the example file open in Google Chrome, right-click on the page, choose Save As making sure Webpage, HTML Only is selected from the pop-up menu, and save the file as index.html to your desktop.

Organizing your folder structure

The Bootstrap Marketing Template and the folders that you get when you download Bootstrapdon’t have a file structure so I always take some time to reorganize things a bit before getting too deep into my web build. First, I like to put all my CSS, JS, and Bootstrap files in a folder called _ (underscore) so that this folder will always show up at the top of the file listing. I also rename the Bootstrap folder to _.

Next I create an images folder at the same level as my index.html file. Then I move all of my files into a new folder. It doesn’t matter what you call it, it’s simply a container for the project. Here’s what my folder structure looks like when I’m done:

Because the index.html file does not link to the files in my new folder structure outlined above, it will need to be modified a bit. To do this, open up the example file’s index.html file in your favorite text editor and change every occurrence of /assets/ to _/. This can be done manually, or you can use the text editor’s search and replace functionality. Preview the page in a browser and make sure that it looks like the example image above.

Streamlining the template

I’ll start modifying my template by changing the text inside the <title> tag to the name of my site, which in this case is Everlasting Classic. I’ll also go into the navbar section of my code and change the text that says Project Name to Everlasting Classic.

I’ll keep the home navigation, but I will also need another link on the navbar to my blog.

Here’s what the navbar code looks like after some edits:

I’ll also get rid of some stuff I won’t use. I’m not going to create a favicon.ico file for this project or icons for iOS devices, so I’ll get rid of this section.

Scaffolding content

In web design, scaffolding refers to quickly putting together a layout. For our Bootstrap scaffolding I’m going to modify the main content of our marketing template with some dummy content in a three-column format. It’s worth examining how this scaffolding is put together.

Bootstrap lets you easily build rows of content with a <div class="row"> tag. The default Bootstrap template has 12 columns. To create three columns within the rows, you simply embed three additional <div class="span4"><div class="span6"><div class="row"> tag.

If you wanted to make two columns where column one would be twice the size of column two, you would use <div class="span8"> for the first column and <div class="span4">. It works because it still adds up to 12.

To get started with our scaffolding, let’s go ahead and replace the sample <div class="row"> tag with the following:

If you want to see the images that I’m linking to with this sample code, make sure you download the finished project from GitHub and move the images folder from the finished project into your own project.

Since we don’t need them, I’ll also delete the <hr> tag as well as the <footer> section.

Adding a header

I want this site build to have a small header introducing people to my site, so I’ll add that code right before my hero unit after the <div class="container"> tag:

Using a carousel

So far, the marketing template is working pretty well, but I’d like to add a rotating carousel to my page. Normally, that would require me to write my own jQuery or use a plugin to take care of the animation, but Bootstrap comes with its own carousel implementation that requires no JavaScript:

Before we get the carousel to work, we need to modify the calls to our JavaScript files. The sample marketing template calls on a number of JavaScript files in which we need to replace this:

with a single call to our bootstrap.js file and our jquery.js file:

The carousel requires minimal markup and should work pretty well with minimal adjustment. Simply place the images you want to rotate inside <div><div class="carousel-inner"> tag. Then create two link tags for the carousel arrows and wrap the whole thing with a <div id="myCarousel" class="carousel slide"> tag. If you want to use multiple carousel files, just give them each a unique id.

Styling the Bootstrap page

If you’re following along, at this point in the build your Bootstrap site should look something like this:

I’d like to use Lobster Two and Droid Serif custom fonts on this project so I’ll use this code:

I’m also going to add another stylesheet to my page so I need to add the code for that right after the Googlefonts line:

<link href="_/css/mystyles.css" rel="stylesheet">

One way, and probably the best way to optimize your CSS files, is to use the GitHub customize page. It has the huge advantage of letting you pick only the CSS and JavaScript components you need for your project so that you only get the code you need for your page. Otherwise, the stylesheet and JavaScript will be much greater than they need to be.

The problem with optimizing your CSS files with the GitHub customize page is that the final product lacks the dynamic feedback you get from editing things yourself. Modifying the files myself let’s me visually customize the template for my needs. I can then come back to the customize page and plug in the values I used from my stylesheet.

Base CSS

To get into our base CSS, I’ll start by adding some CSS to change the color of our background, and to establish how our fonts and the header look.

Carousel CSS

In our carousel, I want to add a 10-pixel white border and rotate the photos by 1 degree. To do this I recommend using multiple browser prefixes to make it as compatible as possible:

Rows CSS

I wrapped each <div> that contains information about individual shows with the class .carshow, so I can target that class with CSS. I want to establish the main font as ‘Droid Serif’ and then use ‘Lobster Two’ for the <h2>

Navigation CSS

I would like to adjust the default Bootstrap navigation so that it appears as a green to dark green gradient. Finding out which gradient to adjust in the original template CSS can be quite challenging. The right class to modify is called .navbar-inner. I’m not sure why, but I could only get it to work if I added the !important keyword to each gradient adjustment.

Bootstrap has a special class for navigation titles called .brand, so we can use that to change the font to ‘Lobster Two’.

Finally, I’ll make some minor adjustments to the rest of the navigation to make them look like tabs.

Final thoughts

Working with Bootstrap beats having to calculate your column widths for responsive design, and being able to scaffold your websites quickly, without having to pull out your slide ruler to calculate the responsive widths is really handy. There’s so much awesome interactivity you can build with it, if you spend some time mastering it, you’ll be cranking out cool, responsive sites in no time.