With so many people browsing the Internet via mobile devices, it’s crucial to optimize your websites for both the desktop and mobile browsing experience. The preferred way to do that is to make your pages “responsive” so that their layout changes based on the size of the viewport. The CSS media queries utilized to accomplish that are not easy to master. Therefore, using a framework like Bootstrap makes it so much easier to develop a responsive design. In today’s tutorial, we’ll see just how easy it is to design a web page with a navigation bar, header, three-column layout, and a footer using nothing more than one HTML file and Twitter Bootstrap 3.
About the Demo Page
In addition to being responsive, the page that we are designing will showcase a few of Bootstrap’s best features, including:
- multi-column layout
- navigation bars
- hosted libraries
- circular images
- dropdown menus
As such, our page will contain a navbar, header, three columns, and footer:
When completed, the demo page will look like this in a desktop browser:
First Things First
The Page DOCTYPE
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 DOCTYPE, so it must be the first line in the document.
The HEAD Element
Not to be confused with the page Header section, the HEAD element is a container for metadata, which is not displayed. Metadata typically define the document title, styles, links, scripts, and other meta information.
The Viewport Meta Tag
Bootstrap 3 is mobile first, in that mobile styles are included in the core rather than in separate files. To ensure proper rendering and touch zooming, add the viewport meta tag to the HEAD.
Linking to the Hosted Library
You can download the distributables from the Bootstrap site, but for today’s demo, we’ll incorporate Bootstrap in our page by linking to CDN-hosted (Content Delivery Network) files. Not only is it a lot easier, but CDNs can offer a performance boost by reducing loading time. That’s because CDNs host the Bootstrap files on multiple servers spread across the globe so that when a user requests the file it will usually be served from the server nearest to them.
Here is the complete markup thus far:
<!DOCTYPE html> <html lang="en"> <head> <title>HTMLGoodies Bootstrap 3 Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head>
Building the Navbar
Bootstrap requires a containing element to wrap site contents and house the layout grid. It offers two types of container classes: .container defines a responsive fixed width container, while .container-fluid defines a container that spans the entire width of the viewport. Our outer-most DIV uses a fixed width container.
Bootstrap uses the HTML5 <nav> tag with special class names to define navigation menus. The navbar-default class gives the background color to the menu and also applies a border to it.
The navbar-header DIV is where the name of the website is displayed (as identified by the navbar-brand class) as well as the “Toggle navigation” for screen readers and icon bar for mobile devices.
Inside the main content DIV of our menu .collapse and .navbar-collapse are applied to make the menu touch-compatible and change its appearance for mobile devices.
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</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 role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
The Header
The HTML5 HEADER section specifies content that sits at the top of the document or section. Bootstrap includes the jumbotron class that encloses its contents within a gray rectangle with rounded borders.
For fun, we’ll format our image with the img-circle class.
<header class="jumbotron"> <img src="http://www.gravellewebdesign.com/images/rob.jpg" width="110" height="90" class="img-circle size padding" alt="Rob Gravelle" style="float:left;"/> <h1>Bootstrap 3 Demo</h1> <p>Resize this page in the browser to see the layout adjust automatically!</p> </header>
Defining Columns
Bootstrap implements a 12 grid system, which divides the screen into 12 equal parts. Each row is defined by a DIV with the “row” class. The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts. Our demo includes three equal-width columns on desktops. On mobile phones, the columns will automatically stack:
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
The Footer
The footer is similar to the header, but resides at the bottom of the document.
<footer>
<div class="jumbotron">
<p>If you enjoyed this article, please contribute to Rob's rock star aspirations by purchasing one of Rob's cover or original songs from
<a href="https://itunes.apple.com/ca/artist/rob-gravelle/id288440853" target="_blank">
iTunes.com</a> or <a href="https://www.amazon.com/s/ref=ntt_srch_drd_B001ES9TTK?ie=UTF8&field-keywords=Rob%20Gravelle&index=digital-music&search-type=ss" target="_blank">
Amazon.com</a> for only 0.99 cents each. Rob has also released CDs with his band <a href="https://www.cdbaby.com/Artist/IvoryKnight" target="_blank">
Ivory Knight</a> and Annihilator founder <a href="https://www.cdbaby.com/cd/perinbam" target="_blank">
Jeff Waters</a>.</p>
</div>
</footer>
Conclusion
There’s a lot more to Twitter Bootstrap 3 than we covered here today. In an up-coming tutorial, we’ll explore additional features.
