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.
The end result of this tutorial will be a custom Bootstrap website (you can see the final website here). If you prefer to skip the basics and get right to the Bootstrap code, you can download the code directly from GitHub.
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.
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,.
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.
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"> tags inside the row. The number of columns in each row always have to add up to 12, so if you wanted two columns of equal width you could place two
<div class="span6"> tags inside the
<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
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
with a single call to our
bootstrap.js file and our
The carousel requires minimal markup and should work pretty well with minimal adjustment. Simply place the images you want to rotate inside
<div> tags and wrap them with a
<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
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:
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Lobster+Two' rel='stylesheet' type='text/css'>
And I’ll put it right after the call to my responsive CSS file:
<link href="_/css/bootstrap-responsive.css" rel="stylesheet">
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">
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.
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.
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:
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> tags. From there, I can make other typographical changes to our car show info. Finally, I want do make the photos match our white border.
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.
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.
Also, if you want to learn more, you might want to check out Jen Kramer’s course Up and Running with Bootstrap.
If you have any questions, feel free to ask here in the comments section of this post.