Bootstrap Component Tour: Navbar and Grid

By Rob Gravelle

Bootstrap is an HTML, CSS, and JS framework for building responsive designs that adapt to PCs, tablets and mobile phones with little or no customization on your part. The convenience of being able to code for multiple platforms at once has made Bootstrap to the framework of choice for many web designers and developers. Version 3 - released in August of 2013 - was a complete rewrite and redesign that aimed to satisfy the latest web trends and users' needs. It introduced lots of exciting changes and new features. The official current version is 3.3.5, but, just in time for Bootstrap's fourth birthday, Bootstrap 4 Alpha has now been shipped! With all the buzz in the air, there is no better time to see what Bootstrap has to offer.

Using Bootstrap in your Pages

There are two ways to incorporate Bootstrap in your web pages. The first is to download the distributables from the Bootstrap site. The zip archive is comprised of three folders: one for JS files, one for CSS files, and the other for glyphicon fonts:

bootsrap_dir_structure.jpg

My preferred way to is to incorporate Bootstrap in my pages is to link to CDN-hosted (Content Delivery Network) files. Not only does that save you from having to download and host Bootstrap or jQuery yourself, 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 a basic template file with links to the CDN resources, including jquery.min.js, bootstrap.min.js, bootstrap.min.css, and the optional bootstrap-theme.min.css:

<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<! -- Optional Bootstrap theme -- >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
    <h1>Basic Bootstrap Template</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>     

Navbar

Navbars are components that serve as navigation headers for an application or site. The Bootstrap Navbar is laid out horizontally in large viewports and collapses in mobile views to accommodate the narrower viewport width. Try this code out to construct a basic Navbar:

<section id="navbar">
  <div class="page-header">
    <h1>Bootstrap 3 Navbar</h1>
  </div>
  
  	<div class="container">
      <nav class="navbar" role="navigation">
        <! -- Brand and toggle get grouped for better mobile display -- >
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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="#">Title</a>
        </div>
      
        <! -- Collect the nav links, forms, and other content for toggling -- >
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </nav>

	</div>

default_navbar.jpg

Modifying the look of the navbar is as easy as adding the "navbar-inverse" class to the opening <nav> tag.

<nav class="navbar navbar-inverse" role="navigation">
</nav>

inverse_navbar.jpg

Like all Bootstrap components, the Navbar automatically adjusts for smaller viewports:

inverse_navbar_mobile_closed.jpg

 

inverse_navbar_mobile_expanded.jpg

Grid

The Bootstrap grid system provides the quick and easy way to create web page layouts. As opposed to the previous Bootstrap 2.x grid system, which was fixed by default, version 3 introduced the responsive mobile fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Here is the HTML markup to create a scaffold-style layout:

<section>
<! -- Bootstrap 3 Scaffolding -- >
  <div class="page-header">
    <h1>Grid</h1>
    <p class="lead">Bootstrap 3 scaffolding has changed for improved display on mobile devices</p>
  </div>
  
<div class="container">
<div class="row">
	<div class="col-lg-12"><div class="well"><p>col-lg-12</p></div></div>
</div>
<div class="row">
  	<div class="col-lg-4"><div class="well"><p>col-lg-4</p></div></div>
	<div class="col-lg-4"><div class="well"><p>col-lg-4</p></div></div>
	<div class="col-lg-4"><div class="well"><p>col-lg-4</p></div></div>
</div>
<div class="row">
	<div class="col-lg-6 col-sm-6"><div class="well"><p>col-lg-6</p></div></div>
	<div class="col-lg-6 col-sm-6"><div class="well"><p>col-lg-6</p></div></div>
</div>
<div class="row">
	<div class="col-lg-9 col-sm-6"><div class="well">col-lg-9 / col-sm-6</div></div>
	<div class="col-lg-3 col-sm-6"><div class="well">col-lg-3 / col-sm-6</div></div>
</div>  
</div>
</section>

Notice how the layout changes based on the viewport width:

grid_in_large_viewport.jpg

 

grid_in_medium_viewport.jpg

 

grid_in_small_viewport.jpg

Conclusion

One of the things that makes Bootstrap revolutionary in my opinion is that its layouts are based on viewport width, as opposed to device type. Device sniffing, just like browser sniffing before it, yielded inconsistent results and was unreliable. Stay tuned for more on Bootstrap components, including buttons, glyphicons, and forms.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date