loading...

Bootstrap 3 – Adding Bootstrap Components

The Grid and the Base CSS constitute the rock-solid foundation of Bootstrap. Components are an imperative cog in the wheel in web designing with Bootstrap. They are single fragments of markup, sometimes bound to JavaScript functionalities, ready to be chosen, copied, and used in our web pages.

Terms such as modularity, code reusability, and
separation of responsibilities are consistently linked to web development. These attributes lead to easy code maintenance, readability, and save the developers a lot of time and effort, resulting in a systematic and organized approach.

In this chapter, we’ll take a look at the following Bootstrap components:

  • Glyphicons
  • Navs
  • Nav tabs
  • Nav pills
  • Navbars
  • Dropdowns
  • Breadcrumbs

Components and their usage

In Bootstrap, a component may be used regardless of the other components and its default style is already defined inside the main Bootstrap CSS (though a few may also require JavaScript). Thus, you can generate as many different instances of a component as per your requirements with the same visual style applied to them and saving yourself precious time and effort, thereby allowing you to focus on the more vital parts of your development process.

Glyphicons

Glyphicons is a utility of monochromatic icons and symbols with emphasis on simplicity, keeping usability in mind. The creators of Glyphicons have provided these icons free of cost for Bootstrap. The official Glyphicons web page at http://glyphicons.com/ contains a detailed list of all the icons that are of great use while developing complex websites, as icons are better than words in most cases.

The following screenshot displays some of the popular Glyphicons available for Bootstrap:

Take a look at the following code to understand it better:

<!DOCTYPE html>
<html>
<head>
<title> Bootstrap 3 Glyphicons</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
    #pub {
      padding: 50px 100px 50px 50px;; 
    }
   #packt{
    float:right;
    display:block;
    margin-right:0px;
    clear:left;
}
    #packtpub{
    float:right;
    display:block;
    margin-right:0px;
    clear:left;
}
</style>
</head> 
<body>
<div id="pub">
    <form>
        <div class="row">
            <div class="col-xs-7">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    <input type="text" class="form-control" placeholder="Search ">
                </div>
                </div>
        <br><br>
         <button type="submit" class="btn btn-success" id="packt"><span class="glyphicon glyphicon-log-in"></span> Login </button>
        <br>
        <br>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span> Mail</button>
        <br>
        <br>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span> Find Friends </button>
        <br>
        <br>
        <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span> Empty Trash </button>
        <br><br><br>
        <p> To get rid of malware, Click on the following button </p>
        <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-log-out"></span> Clean System</button>
            <br><br>
             <button type="submit" class="btn btn-success" ><span ></span> Log out</button>
        </div>
</form>
</div>
</body>
</html>

The output of this code upon execution will be as follows:

In the <head> section, we’ve included Bootstrap files such as the Bootstrap JavaScript file and the Bootstrap theme CSS file in addition to styling with custom CSS. We’ve defined the search icon by including the <span ></span> code. Similarly, we’ve added the Login icon by using the <span ></span> code. Thus, all the icons need a base class along with the individual icon class. However, one point to note is that the icon classes cannot be directly combined with other components, nor can they be used alongside other classes on the same element. Hence a nested <span> tag is used for inline elements whereas the Glyphicons have to be defined as the class for that <span> tag.

Tip

In all the code examples, we may use padding or a margin so that the output is not too close to the left of the view, thereby helping us take screenshots easily in addition to improving the aesthetics of our design.

Nav tabs

The nav component generates beautiful navigation elements by decorating lists. In HTML, a list is a nestable element used to specify varied information in an ordered ( <ol>) or unordered ( <ul>) manner. Depending on whether it is ordered or unordered, it is presented as enumerated or by de facto bullet points. Using Bootstrap, you can remove the default browser list style and make every link appear as a block.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Nav and Nav Tabs</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .packt{
      margin: 25px 50px 75px 100px;
    }
</style>
</head>
<body>
<div class="packt">
  <ul class="nav">
        <li class="active"><a href="#"> <span class="glyphicon glyphicon-sd-video"> </span> Videos</a></li>
        <li><a href="#"> <span class="glyphicon glyphicon-book"> </span> Books</a></li>
        <li><a href="#"> <span > </span> Inbox</a></li>
  </ul>
</div>
</body>
</html>

The output of this code will be as follows:

You will see that the <nav> element removes the list style. We have also added Glyphicons to each link in the list for enhanced effects.

Now let’s add the .nav-tabs class in conjunction with the .nav class. Therefore, the changed code snippet is as follows:


<ul class="nav nav-tabs">
        <li class="active"><a href="#"> <span class="glyphicon glyphicon-sd-video"> </span> Videos</a></li>
        <li><a href="#"> <span class="glyphicon glyphicon-book"> </span> Books</a></li>
        <li><a href="#"> <span > </span> Inbox</a></li>
  </ul>

The output of this code upon execution will be as follows:

From the output, you can see that up on adding .nav-tabs, the menu items are displayed as tabs and positioned next to each other instead of being vertically stacked. Moreover, the item width is based on the text length.

Nav pills

In order to get a pill-based navigation, you need to replace .nav-tabs with .nav-pills.

Note

Pills can be links or buttons that are arranged horizontally and are drawn with a visual style that indicate an association between them.

Take a look at the following code snippet to understand this better:

<div class="packt">
  <ul class="nav nav-pills">
        <li class="active"><a href="#"> <span class="glyphicon glyphicon-sd-video"> </span> Videos</a></li>
        <li><a href="#"> <span class="glyphicon glyphicon-book"> </span> Books</a></li>
        <li><a href="#"> <span > </span> Inbox</a></li>
  </ul>
</div>

The output of this code will be as follows:

Let’s add the .nav-stacked class to the .nav-pills class using the following line of code:

<ul >

The output of this code upon execution will be as follows:

As you can see from the output, the pills are now vertically stacked.

Justified tabs and pills

In order to make the width of your tabs and pills the same as that of the parent element, you can add an extra class, .nav-justified. However, in screens smaller than 768 pixels, the navigation links will be stacked.

Take a look at the following code snippet to understand this better:

<body>
<div class="packt">
<h3> Justified tabs for Nav-Tabs </h3>
  <ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Guitar</a></li>
        <li><a href="#">Violin</a></li>
        <li><a href="#">Saxophone</a></li>
  <li class="disabled"><a href="#">Harp</a></li>
      </ul>
  <br><hr><br>
<h3> Justified tabs for Nav-Pills </h3>
      <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Guitar</a></li>
        <li><a href="#">Violin</a></li>
        <li><a href="#">Saxophone</a></li>
  <li ><a href="#">Harp</a></li>
      </ul>
</div>
</body>

The output of this code will be as follows:

Therefore, from the output, you can see that the tabs and pills have an equal width of the parent element.

Dropdowns

If there are several links on a page, it becomes too big and cluttered. An effective way to avoid this is to use a drop-down menu so that you can include as many links as possible using a small percentage of the screen.

You can add drop-down menus for buttons, tab, pills, and navbar to mention a few. In the following code example, we’ll create a drop-down menu for .nav-tabs:

<!DOCTYPE html>
<html>
<head>
<title> Dropdowns in Bootstrap 3 </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
    #packt{
      padding: 30px;
    }
</style>
</head>
<body >
<div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#"> <span class="glyphicon glyphicon-home"> </span> Packt Home Page</a></li>
        <li><a href="#"> <span class="glyphicon glyphicon-user"> </span> Authors</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Blogs <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="https://www.packtpub.com/books/content/blogs"><span class="glyphicon glyphicon-book"> 

</span> Blog </a></li>
                <li><a href="https://www.packtpub.com/books/content/tech-hub"><span class="glyphicon glyphicon-

bookmark"> </span> Tech Hub </a></li>
                <li><a href="https://www.packtpub.com/books/content/article-network"><span class="
glyphicon glyphicon-book"> </span> Article Network </a></li>
                <li ></li>
                <li><a href="https://www.packtpub.com/books/content/support">Support</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

The output of this code upon on execution will be as follows:

If you observe the code and the subsequent output, we created navigation tabs and defined the list of items in addition to using Glyphicons with the list. Now, we assign a drop-down class and add the drop-down toggle for the anchor tag and create a caret in addition to defining the drop-down functionality using the data-toggle="dropdown" attribute. After the Blog, Tech Hub, and Article Network items were created in the list, we defined a . divider class, which will split the drop-down menu. Later on, we defined the Support item in the list. On clicking the Blogs tab, we can see that the drop-down menu has been created and there is a divider separating the first three items and the Support item.

This process can also be used for . nav-pills and buttons too. It can also be applied to the navbar, which we will see in the next example.

Navbar

The navbar component gives you the power to generate portions of self-contained bars, which could be used as whole-application headers, versatile secondary menus for page content, or as a shell of various navigation-related elements. You can develop static navbars with simple navigations or navbars with forms, search boxes, and drop-down menus too.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
<head>
<title> Boostrap NavBar </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .packt{
      padding: 30px;
    }
</style>
</head> 
<body class="packt">
<div>
    <nav role="navigation" class="navbar navbar-default">
       <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">Packt Publishing</a>
        </div>
        <div  class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"> Books and Videos </a></li>
                <li><a href="#"> Articles </a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"> Categories <b class="caret"></b></a>
                  <ul role="menu" class="dropdown-menu">
                    <li><a href="#"> Web development </a></li>
                    <li><a href="#"> Game Development </a></li>
                    <li><a href="#"> Big Data and Business Intelligence </a></li>
                    <li><a href="#"> Virtualization and Cloud </a></li>
                    <li><a href="#"> Networking and Servers </a></li>
                    <li class="divider"></li>
                    <li><a href="#"> Miscellaneous </a></li>
                  </ul>
                </li>
     <li><a href="#"> Support </a></li>
            </ul>
            <form role="search" class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" placeholder="Search Here" >
                </div>
            </form>
        </div>
    </nav>
</div>
</body>
</html>

The output of this code will be as follows:

In the preceding code, you can see the navbar in action. Let’s discuss the code so that you can understand the reason for its output.

To create a navbar, you need to define the role as navigation and use the .navbar navbar-default class. Then, we define the .navbar-header class and later on define a button. The button element has an ID defined for its data target value which you can use to dynamically hide or show the element. Then the . collapse functionality is defined and uses the JavaScript file of Bootstrap.

Tip

The sr-only helper class should be used in those cases where the inner text has to be available for screen readers, bots, and crawlers but must remain invisible for the users of your website.

Next, we assign the value Packt Publishing to the anchor link containing the .navbar-brand class. Then we create navigation tabs using the .navbar-nav class, and create the navigation tabs for the navbar in the same way as we created the tabs using the . nav-tabs class. Finally, we create a basic form with the search function by defining the <form> element and the .navbar-form class. In addition to this, we shift the search box to the right using the .navbar-right class.

By adding .navbar-fixed-top in addition to the .navbar and .navbar-default base class, you can create a navbar that is fixed at the top. However, you need to include a .container class or a .container-fluid class along with it to center and pad the navbar content. The code snippet has to be defined in the following manner:

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div >

Similarly, you can use the .navbar-fixed-bottom class to create navbars fixed to the bottom. Using the fixed top and bottom class attributes, you can create a navbar that remains visible and scrolls with the page content.

Note

Remember to define the padding-top style in the CSS to the body element, which must be equal or greater than the navbar height so that the page content is not overlapped.

If you want a fixed top navbar without any padding, you can alternatively use the .navbar-static-top class in conjunction with the .navbar and .navbar-default class:


<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div >

Remember that you also need to define the .container class or the .container-fluid class like the top and bottom fixed navbar scenarios.

Breadcrumbs

Breadcrumbs are used to enhance the accessibility of your websites by indicating the location using a navigational hierarchy, especially in websites with a significant number of web pages.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Breadcrumbs</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
    #packt, h1{
      margin: 20px;
        padding: 15px;
    }
</style>
</head>
<body>
<h1> BreadCrumbs in Bootstrap </h1>
<div >
    <ul class="breadcrumb">
        <li><a href="#">Tech Hub</a></li>
        <li><a href="#">Blogs</a></li>
        <li >Article Network</li>
        <li><a href="#">Books and Videos</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div>
</body>
</html>

The output of this code upon execution will be as follows:

As you can see from the output, it helps you to depict your location in the web page or web application. We have assigned the .active class for the Article Network list item to give it a real world look.

Comments are closed.

loading...