Getting Started With Bootstrap: Part 3

I have started an article series. The first part, Getting Started with Bootstrap, provided a basic introduction to Bootstrap and Bootstrap layout.

In this article, we'll learn:

• Twitter Bootstrap Nav
• Twitter Bootstrap Navbar
• Twitter Bootstrap Panels
• Twitter Bootstrap Breadcrumbs
• Twitter Bootstrap Pagination
• Twitter Bootstrap Pager
• Twitter Bootstrap Progress Bars

Twitter Bootstrap Nav

This section explains how to create Twitter Bootstrap nav components. You can easily create nav components such as tabs and pills using Twitter Bootstrap. Bootstrap's nav components (tabs and pills) share the same base markup and styles through the .nav class.

Creating Basic Tabs Nav

You can use .nav-tabs class with the base class .nav. The following example will show you how to create a basic tab component using Bootstrap.

HTML Code

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Technologies</a></li>
  <li><a href="#">Blog</a></li>
</ul>

Result



Creating Basic Pills Nav

Similarly you can use the .nav-pills class with base class .nav without any further change in markup.

HTML Code

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Technologies</a></li>
  <li><a href="#">Blog</a></li>
</ul>

Result


Stacked Pills Nav

Pills navigations are horizontal by default. If you want to make vertical stacked pills navigation you just add an extra class .nav-stacked.

HTML Code

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Technologies</a></li>
  <li><a href="#">Blog</a></li>
</ul>

Result


Creating the Dropdown with Twitter Bootstrap Tabs and Pills

You can add dropdown menus to a link inside tabs and pills navigation with a little extra markup and including JavaScript library files jquery.js and bootstrap.js in your HTML file.

HTML Code

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Technologies <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Java</a></li>
      <li><a href="#">C++</a></li>
      <li><a href="#">Asp.Net</a></li>
      <li class="divider"></li>
      <li><a href="#">HTML</a></li>
    </ul>
  </li>
</ul>

Result



To create the Pills with Dropdowns you will changed the .nav-tabs to .nav-pills.

HTML Code

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Technologies <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Java</a></li>
      <li><a href="#">C++</a></li>
      <li><a href="#">Asp.Net</a></li>
      <li class="divider"></li>
      <li><a href="#">HTML</a></li>
    </ul>
  </li>
</ul>

Result



Justified Tabs and Pills

You can easily make your tabs and pills nav having width equal to their parent element by simply adding an extra class .nav-justified. It works only on screens that are wider than 768px, other than the nav links are stacked.

HTML Code

<!-- justified tabs -->
<h5> Justified Tabs </h5>
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Technologies</a></li>
  <li><a href="#">Blog</a></li>
</ul>

<!-- justified pills -->
<h5> Justified Pills </h5>
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Technologies</a></li>
  <li><a href="#">Blog</a></li>
</ul>

Result



Twitter Bootstrap Navbar

This section explains how to create static and fixed navbar components with Twitter Bootstrap.

Creating A Simple Navbar with Twitter Bootstrap

You can create various variations of navbars quickly and without too much effort. The procedure is listed below: 

• Create nav container with class .navigation and .navbar-default.
• For better mobile display you need to create a container with the class .navbar-header. Inside this container, you can create a button to toggle the menu items using data-target.
• Now, you can create your menu item list container. This container has the same id as data-target and the class is .collapse and .navbar-collapse.
• Create menu list with ul li structure with the class .nav and .navbar-nav. 

The following example will you show how to create a static navbar with basic navigation.

HTML Code

<nav role="navigation" class="navbar navbar-default">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a href="#" class="navbar-brand">C# Corner</a> </div>
  <!-- Collection of nav links and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Article</a></li>
      <li><a href="#">Technologies</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Login</a></li>
    </ul>
  </div>
</nav>

Result



Mobile Display



Creating Fixed Navbar with Twitter Bootstrap

Twitter Bootstrap also provides a mechanism to create a navbar that is fixed on the top or bottom of the viewport and will scroll with the content on the page. Add an extra class .navbar-fixed-top or .navbar-fixed-bottom in addition to the .navbar and .navbar-default base class to create navbars that are fixed on the top or bottom.

HTML Code

<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a href="#" class="navbar-brand">C# Corner</a> </div>
  <!-- Collection of nav links and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Article</a></li>
      <li><a href="#">Technologies</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Login</a></li>
    </ul>
  </div>
</nav>

Result



Mobile Display



Note: You can fix .navbar content inside the .container or .container-fluid for proper padding and alignment with the rest of the content. Remember to add padding (at least 70px) to the top or bottom of the <body> element to avoid the content going underneath the navbar when implementing the fixed top or bottom navbar. Also be sure to add your custom style sheet after the core Bootstrap CSS file, otherwise it may not work.

Twitter Bootstrap Panels

This section explains how to create panels with Twitter bootstrap. Sometimes you might need to put your content in a box for a certain reason. In such a condition we can use panel components. In the most basic form the panel component applies a border and padding around the content. The following example will you show how to create simple panels.

HTML Code

<div class="panel panel-default">
  <div class="panel-body">Look, I'm in a panel!</div>
</div>

Result



You can also add a heading to your panel with the .panel-heading class.

HTML Code

<div class="panel panel-default">
  <div class="panel-heading">Heading Page</div>
  <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, leo vel venenatis finibus, purus nisl varius arcu, vel pulvinar turpis sapien at sapien. </div>
</div>

Result



Panels with Contextual States

In Twitter Bootstrap you can also add contextual classes like .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger on the panel components to make it more meaningful and the drawing attention of the user.

HTML Code

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Primary</h3>
  </div>
  <div class="panel-body">The requested page has been permanently moved to a new location.</div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Success</h3>
  </div>
  <div class="panel-body">The server successfully processed the request.</div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">info</h3>
  </div>
  <div class="panel-body">The client should continue with its request.</div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">Warning</h3>
  </div>
  <div class="panel-body">The request cannot be fulfilled due to bad syntax.</div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">Danger</h3>
  </div>
  <div class="panel-body">The server is temporarily unable to handle the request.</div>
</div>

Result



Twitter Bootstrap Breadcrumbs

This section explains how to create breadcrumbs with Twitter Bootstrap. A breadcrumb is a navigation scheme that indicates the user's location in a website or web application. The following example shows how to create breadcrumbs.

HTML Code

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li class="active">Accessories</li>
</ul>

Result


Twitter Bootstrap Pagination

This section explains how to create pagination with Twitter Bootstrap. Pagination is the process of organizing content by dividing it into separate pages. The following example show you how to create various types of pagination .
 

HTML Code

<h3> Simple Pagination </h3>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<h3> Pagination with Disabled and Active States </h3>
<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<h3>Different Sizes of Pagination</h3>
<!-- Larger pagination -->
<ul class="pagination pagination-lg">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<!-- Default pagination -->
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<!-- Smaller pagination -->
<ul class="pagination pagination-sm">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Result



Twitter Bootstrap Pager

In Bootstrap you can create a pager (Previous and Next links) on your website. For creating a pager with bootstrap you can add a bootstrap class .pager in the ul li structure.

HTML Code

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Result



Note: You can create an alignment of the pager using the .previous and .next class and you can disable the links using the .disable class.

Twitter Bootstrap Progress Bars

This section explains how to create progress bars using Twitter Bootstrap. Progress bars can be used for loading, redirecting, or showing action status to the users. To create Progress bars we can use the .progress class, it is a base class of the Twitter Bootstrap progress bar. We can create various types of progress by using different progress classes like .progress-striped , .progress-bar-success and so on with the base class .progress or .progress-bar. The following example will show how to create a simple progress bar with vertical gradient, Stripped and stacked.

HTML Code

<h3> Vertical Gradient Progress Bar</h3>
<div class="progress">
  <div class="progress-bar" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div>
</div>
<h3>Stripped Progress Bar</h3>
<div class="progress progress-striped">
  <div class="progress-bar" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div>
</div>
<h3>Stacked Progress Bar</h3>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div>
</div>

Result



Progress Bars with Emphasis Classes

Twitter Bootstrap also provides some emphasis utility classes for progress bars that can be used to convey meaning through color.

HTML Code

<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 20%"> <span class="sr-only">80% Complete</span> </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 60%"> <span class="sr-only">40% Complete</span> </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 80%"> <span class="sr-only">20% Complete</span> </div>
</div>

Result



Twitter Bootstrap utility components and classes

This section explains how to use Twitter Bootstrap utility components and classes. Twitter Bootstrap offers components and classes for better document structure: 

Classes	Description
.jumbotron	It's provides an excellent way to showcase the key content or information on a website like hero unit.
.well	You can create simple inset effect to the element
.pull-left	Floats an element to left.
.pull-right	Floats an element to right.
.clearfix	Clears the float on any element.

 

<<Go back to Part 2