Bootstrap Tabs

• Download source - 914 B

Introduction

This tip presents an example of tabs in Responsive using bootstrap. In many kind of situations, we are using tabs.

Today, I will give a small example of working with tabs in bootstrap.

Background

Bootstrap

Bootstrap is the most popular for HTML, CSS and JS framework for developing responsive applications.

Responsive

Responsive means the single application will target any device like mobile, tablet, small PC and large PC.

CDN

CDN means 'content delivery network', i.e., the required libraries are hosted globally in the internet so you just include that library in the link. You do not need to download the library and include to your project. Just give the direct location where the libraries are located.

Using the Code

Here is the code to display Tabs in responsive mode.

The JQuery is the top of all the .js libraries.

First, we need to include the required libraries.

Here I am using CDN libraries:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
 rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
 src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

After including all required libraries, put your Tabs code.

Here, I am showing data in static mode for all domain developers and is useful. If the data is dynamic, then also there is similar kind of work.

<div class="container ">
    <!-- Header -->
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#tab1" 
            data-toggle="tab">Dotnet</a></li>
            <li><a href="#tab2" data-toggle="tab">Java</a></li>
            <li><a href="#tab3" data-toggle="tab">Database</a></li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane  active" id="tab1">
                <div class="row header" style="margin-top: 20px">
                    <div class="col-md-9">
                    <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="C#.Net">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Vb.Net">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Asp.Net">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Asp.Net MVC">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="WPF">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="WCF">
                </div>
        
             </div>
            <div class="col-md-3">
                            <button type="submit" class="btn btn-primary">
                                Submit</button>
                        </div>
       </div>
        </div>
<div class="tab-pane" id="tab2">
                <div class="row header" style="margin-top: 20px">
                    <div class="col-md-9">
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="CoreJava">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="AdvancedJava">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="JDBC">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Hibernates">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Springs">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Structs">
                </div>
         </div>
            <div class="col-md-3">
                            <button type="submit" class="btn btn-primary">
                                Submit</button>
                        </div>
        </div>
        </div>
<div class="tab-pane" id="tab3">
                <div class="row header" style="margin-top: 20px">
                    <div class="col-md-9">
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Oracle">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="MySql">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="SqlServer">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="FlateFiles">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="Ms-Access">
                </div>
            <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                       </span>
                      <input type="text" class="form-control" value="TextFiles">
                </div>
            </div>
            <div class="col-md-3">
                            <button type="submit" class="btn btn-primary">
                                Submit</button>
                        </div>
        </div>
        </div>
    </div
   </div>
</div>

Finally after creating tabs code, just run it.

Don't worry about the code - it looks large but it's very simple. In this example, I am showing 3 tabs with data so it's looking large. Just read it one tab code remaining two tabs is similar like replica.

That's it! Now output looks like this in desktop.

The output in Mobile is like this:

Points of Interest

I feel very happy to have worked on this.

History

• 2014-10-02: Initial version