Getting started with Bootstrap customization and responsive design

Published by | Friday, November 16th, 2012

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.

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.

Our finished website

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.

You don't need all the files in the folders that download with Bootstrap, so customize your folders before you go further.

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).

Click the Download button to save the jQuery file.

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).

Using a Bootstrap example template to get started

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:

The complete Bootstrap folder structure

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"> 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 <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> 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 id.

Styling the Bootstrap page

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

Our Bootstrap example page without style customization

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">

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> 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.

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.

Here’s the finished version of the site, and you can download the whole site on GitHub.

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.

• Start your 7-day free trial to lynda.com today

Share this:Share on Facebook3Tweet about this on Twitter6Share on Google+1Pin on Pinterest0Share on LinkedIn0

lynda.com - start learning today

Tags:


7 Responses to “Getting started with Bootstrap customization and responsive design”

  1. Mike says:

    Hi, this all looks pretty decent. Responsive design can be cool. But it struck me as very odd to have a “demo” where the second “blog” section isn’t finished – clicking that menu button just opens a generic WordPress default site. What happened there?

    • Hey Mike,

      Thanks. The reason for the second blog section not being finished is that it didn’t really have anything to do with BootStrap. I wanted to have a second link so that I could show the difference in styles between the first and second link. So I grabbed a link from another project on installing WordPress.

      • Mike says:

        Ok. I was just hoping to see some of the same type of formatting applied to a different page (text oriented for example). Anyway, it did look decent so keep it up.

  2. Jessica says:

    Yay! Thanks so much, Ray. I’ve been waiting for this post from you and it did not disappoint.

    A couple of things… I think that the incorrect YouTube video may be embedded in the post. Also, I think you may have a typo here: “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 tags inside the tag.” I think that should be “span6,” since you want two equal columns.

    I’m really digging Bootstrap these days, too, and am always looking for more info. Consider doing a “Bootstrap in Depth” course to build on Jen’s great intro course.

    Thanks again for the post, Ray!

  3. Guillermo says:

    Thanks man! nice Post! Helped me a lot

  4. Shiku gfa says:

    Great tutorial.

Leave a Reply