How To Build Responsive Mobile Friendly Websites With Twitter Bootstrap

Twitter Bootstrap is a CSS framework that helps in creating responsive websites. Bootstrap is lightweight, easy to use, and only requires a basic knowledge of HTML to incorporate most of its features. You’re probably asking yourself, why should I use Bootstrap? Can’t I make my website responsive without using good old Bootstrap? Well, you’re actually right, you can. But I would urge you to stop and ask yourself if you want to go through the trouble. Have you ever heard the saying, “Don’t reinvent the wheel, just realign it.” In my opinion, anything that saves you time and headache is an invaluable resource. In this tutorial, I will walk you through how to create a basic web page, that adapts to various window sizes and devices, such as: phones, tablets, laptops, or even desktops. This tutorial presumes no prior knowledge of working with frameworks, and will walk you step by step through the installation and setup. Below is the finished product of what we are going to develop.

What Does it Mean to Have a Responsive Website?

Before we dive into building a website with Twitter Bootstrap, I want to quickly review the meaning of Responsive Web Design. No, responsive does not mean that your website is consciously aware and alive! But rather refers to formulating a website for optimal viewing and interaction experience, by adapting the layout to the viewing environment. This is accomplished by using fluid, proportion-based grids, flexible images, and CSS3 media queries. For the intent of this tutorial, I will be referring to Responsive Web Design as RWD for abbreviated purposes.

Enough Preface! Let’s Get Started

To start using Twitter Bootstrap, you must download it. There are multiple ways of doing this. You can choose to use Bootstrap CDN links(which will allow you to use the framework without having to download it), Bower, Composer, or npm. But the most basic way is to go to their getting started page. From this page you will see three different download options. Since you are new to Bootstrap, let’s choose the basic Download Bootstrap option. This option includes the compiled and minified CSS, JavaScript, and fonts. None of the docs or original source files are included.

If you have anterior understanding of how to use a CSS preprocessor, there are 2 other options available. The source code option contains Less, JavaScript, and font files, along with their documentation. It requires a Less compiler and some initial setup.The Sass installation is probably the most complex out of all 3, but once it is set up, it allows for easy inclusion in Rails, Compass, or Sass-only projects.

Once you have chose the Download Bootstrap installation, unzip the compressed folder to see the structure of the Bootstrap files.(Mac OS X usually unzips the folder for you automatically). You will see something like this:

bootstrap/
├── css/
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
│   └── npm.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Create a Basic HTML Template

Now that the compiled Twitter Bootstrap files have been downloaded and unpacked, we can continue on with the setup for our web page. First, create a folder and name it Line25Demowebpage. This folder is going to serve as the root directory for our web page, and we are going to place all of our main website files inside of here.

Next, copy the css, js, and fonts folders into the root directory of your website. Below is an example of me doing that.

On the left, you see the folders inside the downloaded Bootstrap directory. And on the right, you see the root directory for my demo web page called Line25Demowebpage.

Highlight and drag the files from the left, into your website folder Line25Demowebpage, on the right. When working with Mac OS X, to copy files from one Mac Finder folder to another, just hold down the [Option] key when dragging your files from one folder to another. On Windows, If you press and hold the right mouse button while dragging, a menu appears that lets you choose a specific action, such as copying or moving.

Now open up your favorite text editor. Personally I prefer PhpStorm or Cloud9. Here are some other recommendations:

Sublime Text – Windows, Mac OS X, Linux
Notepad++ – Windows, Mac OS X, Linux
BBEdit – Windows, Mac OS X
UltraEdit – Windows, Mac OS X, Linux
Atom – Windows, Mac OS X, Linux

Create a file named index.html, and place it in the root of your website directory, Line25Demowebpage. Below I am using the TextMate editor as an example.

Copy the HTML below and paste it into the index.html file to begin working with a minimal Bootstrap application. Throughout the rest of this tutorial, feel free to customize the template and examples, adapting them to suit your needs.

 
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <title>Line25 Demo Web Page</title>

 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="http://ift.tt/1xwklwE"></script>
 <script src="http://ift.tt/1qIredN"></script>
 <![endif]-->
 </head>
 <body>
 <h1>Welcome to the Line25 Demo Web Page</h1>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="http://ift.tt/1LdO4RA"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Below is the index.html page after I copied the above code into it.

Now save and run in your favorite browser.

Congratulations! You have successfully set up your first Twitter Bootstrap web page. But before you celebrate too hard, you have a little more work to do. Let’s continue on!

Quick Intro to Twitter Bootstrap’s Grid System

Grid systems use a set of rows and columns to create your page layout. Twitter Bootstrap incorporates a responsive, mobile first fluid grid system that properly scales up to 12 columns as the user’s device or viewport size expands or decreases. It combines predefined CSS classes as well as dynamic mixins for creating responsive and browser compatible layouts for your web applications.

After each bullet point, I will write some HTML below, that way you can visualize what I’m talking about. Don’t add this to your main index.html file yet! This is just a quick intro to what we will be doing in a second.

To set up your grid system, first you must create a <div> with a .container class(fixed-width) or a .container-fluid class(full-width). Below is an example of a fixed width container.

<div class="container"></div>

Inside your container, is where you place rows. This allows for proper alignment and padding. You can have as many rows as you would like. Below is an example of a container with one row.

<div class="container">
<div class=”row”>
<!-- columns will go inside here -->
</div>
</div>

Inside your row, is where you place columns. Columns are created by indicating the number of twelve available columns you wish to span. Let’s say you wanted to create 3 columns inside a row; then use three tags.

<div class="col-md-*"></div>
<div class="col-md-*"></div>
<div class="col-md-*"></div>

In the example above, you probably noticed that I used a wildcard * in the class name. You actually need to use a number, instead of a wildcard, to make it work. There are a couple things you should know about first:
- The sum of the numbers should equal 12
- Each number represents the virtual width of each column across the browser.
Let’s create 3 columns of equal width.

<div class=”col-md-4”></div>
<div class=”col-md-4”></div>
<div class=”col-md-4”></div>

Last but not least, let’s not forget to place the columns inside of the row.

<div class="container">
<div class=”row”>
<div class=”col-md-4”></div>
<div class=”col-md-4”></div>
<div class=”col-md-4”></div>
</div>
</div>

Let’s do a couple more examples. Let’s create a row with two columns, where the left column is the main body and the right column is a sidebar. That could look like this:

<div class="container">
<div class=”row”>
<div class=”col-md-8”></div>
<div class=”col-md-4”></div>
</div>
</div>

Or it might look like this:

<div class="container">
<div class=”row”>
<div class=”col-md-9”></div>
<div class=”col-md-3”></div>
</div>
</div>

That’s actually all there is to it! Hopefully, now you see how to create a basic grid system using Twitter Bootstrap. We will build off of this for the remainder of our tutorial.

Create the Top Navbar

Copy the HTML below and paste it into the index.html file just below the opening <body> tag.

<nav class="navbar navbar-default">
 <div class="container-fluid">
 <!-- Brand and toggle get grouped for better mobile display -->
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Line25 Demo Web Page</a>
 </div>

 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
 <li><a href="#">About</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">Separated link</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">One more separated link</a></li>
 </ul>
 </li>
 </ul>
 <!-- code for the right side of the navbar -->
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Contact Us</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </li>
 </ul>
 </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
 </nav>

Now save your code and run in your browser again.

If all goes well you can see the navigation bar at the top. Notice when you resize your browser, how Twitter Bootstrap’s built in media queries, automatically resize your web page. Play around with the window size a bit to get a feel for how your web page will look on mobile, tablet, and desktop. Below is an example of me resizing the browser window down to a mobile size.

Create Page Layout Grid

Copy the HTML below and paste it into the index.html file just after the closing <nav> tag. Also remove the “<h1>Welcome to the Line25 Demo Web Page</h1>”, as we won’t be using this anymore.

<div class="container">
 <div class="row">
 <div class="col-md-12">
 <!-- this column will hold the jumbotron and the main content below it -->
 <div class="row">
 <div class="col-md-4">
 <!-- this column will hold the login form -->
 </div>
 <div class="col-md-4">
 <!-- this column will hold a heading with a button -->
 </div>
 <div class="col-md-4">
 <!-- this column will hold a heading with an empty image -->
 </div>
 </div>
 </div>
 </div>
<!-- start footer -->
</div>

Now save your code and run in your browser again. You will see that not much changed. Your <h1> tag disappeared. But besides that, you won’t actually be able to see the grid that you created.

Create the Jumbotron

Copy the HTML below and paste it into the index.html file just below the HTML comment that says “<!– this column will hold the jumbotron and the main content below it –>”

<div class="jumbotron">
 <h1>Hello, world!</h1>
 <p>This is some text for our Jumbotron</p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Now save your code and run in your browser again. If all goes well, you will see a large jumbotron at the top.

Create The Login Form

Copy the HTML below and paste it into the index.html file just below the HTML comment that says “<!– this column will hold the login form –>”

<h2>Login</h2>
<form>
 <div class="form-group">
 <label for="exampleInputEmail1">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Remember me
 </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Now save your code and run in your browser again. You should see a login form in the far left column.

Create Heading With Button

Copy the HTML below and paste it into the index.html file below the comment that says “<!– this column will hold a heading with a button –>”.

<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

Let’s save our index.html file and run in the browser. You should see a middle column with a view details button appears. Our site is starting to come together!

Create Heading With Image

Copy the HTML below and paste it into the index.html file below the comment that says “<!– this column will hold a heading with an empty image –>”.

<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
 <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

You know the drill. Save and run in the browser. You will see the far right column now appears with a spot for an image, and a view details button.

Create Footer

If you have made it this far, then you are at the home stretch. Let’s finish it off by creating the footer. Copy the HTML below and paste it into the index.html file below the comment that says “<!– start footer –>”.

<hr>
<footer>
<p>© Company 2014</p>
</footer>

Ladies and gentlemen. For the last time, save and run in the browser!

Try resizing your browser window and see what it looks like.

Not bad huh!

Closing

Congratulations, you have successfully created your first mobile friendly web page using Twitter Bootstrap. Once you get a little more familiar with the framework, you may want to consider downloading the source code or Sass installation, for greater customization. You might also want to look at custom Bootstrap installations. Doing this allows you to choose which files you want to include in your Bootstrap install. Bootstrap also comes with a plethora of other useful features, such as fundamental HTML elements that have been styled and enhanced, reusable components, and custom jQuery plugins that you can use in any of your web apps. Also, remember when we were creating our grid system; how we used .col-md-* for our div classes? Bootstrap comes equipped with 3 other classes: .col-xs-*, .col-sm-*, and .col-lg-*, which you can use to add custom grid layouts, depending on the size of the device. This is useful incase you want your columns to stack differently on a cell phone or tablet.

As you can see, Twitter Bootstrap can make developing responsive web apps a breeze! Stay tuned for more tutorials on Twitter Bootstrap and all the features it has to offer.

The post How To Build Responsive Mobile Friendly Websites With Twitter Bootstrap appeared first on Line25.