< Bootstrap Tutorial
  Go Top
advertise here!!!

Library || READ MORE || DOWNLOAD PDF || QUESTION ANSWERS || HOME

  • BOOTSTRAP INTRO ↓

    What is Bootstrap

    Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.

    Bootstrap also gives you ability to create responsive layout with much less efforts.


    Advantages of Bootstrap

    The biggest advantage of using Bootstrap is that it comes with free set of tools for creating flexible and responsive web layouts as well as common interface components.

    Additionally, using the Bootstrap data APIs you can create advanced interface components like Scrollspy and Typeaheads without writing a single line of JavaScript.

    Here are some more advantages, why one should opt for Bootstrap:

    • Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.
    • Responsive features — Using Bootstrap you can easily create responsive designs. Bootstrap responsive features make your web pages to appear more appropriately on different devices and screen resolutions without any change in markup.
    • Consistent design — All Bootstrap components share the same design templates and styles through a central library, so that the designs and layouts of your web pages are consistent throughout your development.
    • Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.
    • Compatible with browsers — Bootstrap is created with modern browsers in mind and it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.
    • Open Source — And the best part is, it is completely free to download and use.
  • BOOTSTRAP START ↓

    In this tutorial you will learn how to create a basic Bootstrap template using the Bootstrap 3 compiled version.

    Getting Started with Bootstrap

    Here, you will learn how easy it is to create a web page using Bootstrap. Before begin, be sure to have a code editor and some working knowledge of HTML and CSS.

    If you're just starting out in web development, start learning from here »

    OK, let's get straight into it.

    Downloading the Bootstrap Files

    There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap files from here.

    Compiled download contain compiled and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source contain original source files for all CSS and JavaScript, along with a local copy of the docs.

    For the purpose of better understanding we'll focus on the compiled Bootstrap files. It saves your time because you don't have to bother every time including separate files for individual functionality. It will also increase the performance of your website and saves the precious bandwidth when you decided to move your site on production because of lesser HTTP request and download size since files are compiled and minified.

    Understanding the File Structure

    Once downloaded the compiled Bootstrap, unzip the compressed folder to see the structure. You'll find the following file structure and contents.

    
    bootstrap/
    |—— css/
    |   |—— bootstrap.css
    |   |—— bootstrap.min.css
    |   |—— bootstrap-theme.css
    |   |—— bootstrap-theme.min.css
    |—— js/
    |   |—— bootstrap.js
    |   |—— bootstrap.min.js
    |—— fonts/
    |   |—— glyphicons-halflings-regular.eot
    |   |—— glyphicons-halflings-regular.svg
    |   |—— glyphicons-halflings-regular.ttf
    |   |—— glyphicons-halflings-regular.woff
    
    

    As you can see compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

    There are four font files (glyphicons-halflings-regular.*) inside the fonts folder. These fonts file includes more than 250 icons from the Glyphicon Halflings set.

    Creating Your First Web Page with Bootstrap

    So far you have understood the structure and the purposes of Bootstrap files, now it's time to put Bootstrap into real use. In this section, we'll create a basic Bootstrap template that includes everything we mentioned in the file structure.

    Let's walk through the following steps. At the end of the tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.

    Step 1: Creating a Basic HTML file

    Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code and save it as "basic.html" on your desktop.

                    
    
      <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Basic HTML File</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
            <h1>Hello, world!</h1>
        </body>
        </html>
    
    
                    

    Making this HTML File a Bootstrap Template

    To make this HTML file a Bootstrap template, just include the appropriate Bootstrap CSS and JS files. You should include JavaScript files at the bottom of the page — before closing of the <body> tag (i.e. </body>) to improve the performance of your web pages.

                    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Basic Bootstrap Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <!-- Optional Bootstrap theme -->
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    
    
                    

    And we're all set! after adding the Bootstrap's CSS and JS files and the required jQuery library, we can begin to develop any site or application with Bootstrap framework.

    Saving the file

    Now save the file on your desktop as "bootstrap-template.html".

    To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. (If it does not, open your browser and drag the file to it.)


    Including Bootstrap's Files via CDN

    You can also include the Bootstrap's CSS and JavaScript files as well as the jQuery library JavaScript file in your document using the freely available CDN (Content Delivery Network) links, if you don't want to download and host the Bootstrap or jQuery yourself.

    CDNs can offer a performance benefit by reducing the loading time, because they are hosting the Bootstrap's files on multiple servers spread across the globe and when a user requests the file, it will be served from the server nearest to them.

                    <!DOCTYPE html>
    <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>Hello, world!</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>
    
                    

    In the above example, we've included the compiled and minified version of Bootstrap's CSS and JavaScript files as well as the necessary jQuery library using the CDN links. You'll also find these CDN links in most of the practice examples code throughout this site.

  • BOOTSTRAP GRIDING ↓

    What is Bootstrap Grid System

    The Bootstrap grid system provides the quick and easy way to create the layouts of the web pages. As opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

    Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens. The following table summarizes some of the key features of the new grid system

    Features
    Bootstrap 3 Grid System
    Extra small devices
    Phones (<768px)
    Small devices
    Tablets (≥768px)
    Medium devices
    Desktops (≥992px)
    Large devices
    Desktops (≥1200px)
    Max container width
    None (auto) 750px 970px 1170px
    Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
    Class prefix .col-xs- .col-sm- .col-md- .col-lg-
    Max column width Auto ~62px ~81px ~97px
    Gutter width 15px on each side of a column (i.e. 30px)

    Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present.

    Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the class .col-xs-*, .col-sm-*, .col-md-* and .col-lg-*. The columns are actual content area where we will place our contents. Let's put all these things into real action.

    Creating Two Column Layouts

    The following example will show you how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal as default.

                   <div class="container">
        <!--Row with two equal columns-->
        <div class="row">
            <div class="col-sm-6"><!--Column left--></div>
            <div class="col-sm-6"><!--Column right--></div>
        </div>
        
        <!--Row with two columns divided in 1:2 ratio-->
        <div class="row">
            <div class="col-sm-4"><!--Column left--></div>
            <div class="col-sm-8"><!--Column right--></div>
        </div>
        
       <!--Row with two columns divided in 1:3 ratio-->
        <div class="row">
            <div class="col-sm-3"><!--Column left--></div>
            <div class="col-sm-9"><!--Column right--></div>
        </div>
    </div>
    
    
    

    Since Bootstrap grid system is based on 12 columns, so to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers in each row should be equal to 12. If you see the above example carefully you will find the numbers of grid columns (i.e. col-sm-*) add up to twelve (6+6, 4+8 and 3+9) for every row.

    Creating Three Column Layouts

    Similarly, you can create other layouts based on the above principle. The following example will typically create three column layouts for laptops and desktops screens. It also works in tablets in landscape mode if screen resolution is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode it will be horizontal as usual.

                    
                    <div class="container">
        <!--Row with three equal columns-->
        <div class="row">
            <div class="col-md-4"><!--Column left--></div>
            <div class="col-md-4"><!--Column middle--></div>
            <div class="col-md-4"><!--Column right--></div>
        </div>
        
        <!--Row with three columns divided in 1:4:1 ratio-->
        <div class="row">
            <div class="col-md-2"><!--Column left--></div>
            <div class="col-md-8"><!--Column middle--></div>
            <div class="col-md-2"><!--Column right--></div>
        </div>
        
        <!--Row with three columns divided unevenly-->
        <div class="row">
            <div class="col-md-3"><!--Column left--></div>
            <div class="col-md-7"><!--Column middle--></div>
            <div class="col-md-2"><!--Column right--></div>
        </div>
    </div>
    
    
                    

    Bootstrap Layouts with Column Wrapping Feature

    Now we are going to create more flexible layouts that changes the column orientation based on the viewport size. The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode, but on small devices like tablets in portrait mode, it will change into a two column layout where the third column moves at the bottom of the first two columns.

                    
                    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-md-2"><!--Column one--></div>
            <div class="col-sm-9 col-md-8"><!--Column two--></div>
            <div class="col-sm-12 col-md-2"><!--Column three--></div>
        </div>
    </div>
    
                    

    As you can see in the example above the sum of small grid column numbers (i.e. col-sm-*) is 3 + 9 + 12 = 24 > 12, so the third <div> element with the class .col-sm-12 that is adding the extra columns beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one contiguous unit on small devices having the viewport width less than the 992 pixels.

    Similarly, you can create even more adaptable layouts for your websites and applications using the Bootstrap's grid column wrapping feature. In the next section, we'll discuss the other aspect of this feature.


    Creating Multi-Column Layouts with Bootstrap 3 Grid System

    With the new Bootstrap 3 mobile first grid system you can easily control how your website layout will render on different types of devices that have different screen sizes like cell phones, tablets, desktops, etc. Let's consider the following illustration.

    Bootstrap Grid System Illustration

    In the above illustration there are total 12 content boxes in all devices, but its placement varies according to the device screen size, like in mobile device the layout is rendered as one column grid layout which has 1 column and 12 rows placed above one another, whereas in tablet it is rendered as two column grid layout which has 2 columns and 6 rows. Further, in medium screen size devices like laptops and desktops it is rendered as three column grid layout which as 3 columns and 4 rows and finally in large screen devices like large desktops it is rendered as four column grid layout which has 4 columns and 3 rows.

    Now the question is how we can create such responsive layouts using this Bootstrap new mobile first grid system. Let's start with the medium device that can be a laptop or normal desktop. Since our medium device layout has 3 columns and 4 rows i.e. 3x4 grid layout, so the HTML code for making such grid structure would be something like this.

                    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
    
                    
                    

    If you see the output of the above example in a laptop or desktop having screen or viewport width greater than or equal to 992px and less than 1200px you will find it has 4 rows where each row has 3 equal columns resulting in 3x4 grid layout.

    But just wait, the above example has a major alignment issue. If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.

                   <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
    
    
                   

    Since the default gird system has 12 columns and in our layout sum of the every three column number, i.e. col-md-* is equal to 12 that's why we cleared columns after every third occurrence. In any other scenario where columns numbers are different for every column you should use .clearfix after the column that makes the complete 12 column grid.

    Now it's time to customize our layout for other devices. First customize it for tablet. Since inside the tablet our layout rendered as 2x6 grids (i.e. 2 columns and 6 rows). So, go ahead and add the class .col-sm-6 on every column.

                     <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
    
                     
                     

    Now, since the sum of every two column number, i.e. col-sm-* is equal to 12, so clear floats after every second occurrence of columns.

    After clearing floats for small devices our final code would be:

                   
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
    
    
                   
                   

    Similarly, you can customize the layout for larger devices like a large desktop screen. Here's the final code after combining the whole process.

                                   
                                   
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
        </div>
    </div>
    
    
                                   

    Offsetting the Grid Columns

    You can also move grid columns to the right for alignment purpose using the column offset classes like .col-md-offset-*, .col-sm-offset-*, etc.

    These classes offset the columns by simply increasing its left margin by specified number of columns. For example, the class .col-sm-offset-4 on the column .col-sm-8 moves it to the right over four columns from its original position.

                    
                    <div class="container">
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-8"></div>
        </div>
        <div class="row">        
            <div class="col-sm-8 col-sm-offset-4"><!--Column with 4 columns offset--></div>
        </div>
    </div>
    
                    

    Nesting of Grid Columns

    The Bootstrap gird columns are nestable, that means you can put rows and columns inside an existing column. However, the formula for placing the columns will be the same, i.e. the sum of column numbers should be equal to 12 or less within a single row.

                    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <!--Nested row within a column-->
                <div class="row">
                    <div class="col-xs-4 col-sm-6"></div>
                    <div class="col-xs-8 col-sm-6"></div>
                </div>
            </div>
        </div>
    </div>
    
    
                    
                    

    Bootstrap Responsive Utilities Classes

    You can use the following responsive classes to enable the visibility of elements on certain devices that screen sizes falls with the specific range.

    As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value: inline, block and inline-block.

    Class Description
    .visible-xs-*
    Makes the element visible only on extra small devices having screen width less than 768px. Hidden on others.
    .visible-sm-*
    Makes the element visible only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Hidden on others.
    .visible-md-*
    Makes the element visible only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Hidden on others.
    .visible-lg-*
    Makes the element visible only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Hidden on others.
                    
                    <p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>
    <p class="visible-sm-block">This paragraph is visible only on small devices.</p>
    <p class="visible-md-block">This paragraph is visible only on medium devices.</p>
    <p class="visible-lg-block">This paragraph is visible only on large devices.</p>
    
                    

    Similarly you can use these hidden utility classes to hide the elements on certain devices.

    Class Description
    .hidden-xs
    Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
    .hidden-sm
    Hide the elements only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Visible on others.
    .hidden-md
    Hide the elements only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Visible on others.
    .hidden-lg
    Hide the elements only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Visible on others.
                    <p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>
    <p class="hidden-sm">This paragraph is hidden only on small devices.</p>
    <p class="hidden-md">This paragraph is hidden only on medium devices.</p>
    <p class="hidden-lg">This paragraph is hidden only on large devices.</p>
    
                    

    Similar to the regular responsive classes, you can use the following utility classes to show or hide certain elements for printing purpose or devices.

    Class Description
    .visible-print-block
    Hide block elements for browser rendering while visible for print.
    .visible-print-inline
    Hide inline elements for browser rendering while visible for print.
    .visible-print-inline-block
    Hide inline-block elements for browser rendering while visible for print.
    .hidden-print
    Hide elements for printing while visible on browser.
  • BOOTSTRAP LAYOUT ↓

    Bootstrap Fixed Layout

    In this tutorial you will learn how to create fixed layouts with Bootstrap.

    Creating Fixed Layout with Bootstrap

    With Bootstrap 3 you can still create layouts of web pages based on fixed number of pixels, however this time it is responsive from the start as opposed to previous 2.x version where you need to include the responsive style sheet to make it responsive for other devices.

    The process of creating the fixed yet responsive layout starts with the .container class. After that create rows with the .row class to wrap the horizontal groups of columns. Rows must be placed within a .container for proper alignment and padding.

    Further columns can be created inside the rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number and should be from 1 to 12. Learn more about the Bootstrap grid system.

    The following code creates a fixed width responsive layout that is 750px pixels wide on small devices like tablet having screen width ≥768px, whereas 970px wide on medium devices like desktop and laptop having screen width ≥992px and 1170px wide on large devices like large desktops having screen width ≥1200px. However the layout width will be automatically calculated for devices that has screen width <768px like cell phones.

                    
                    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Bootstrap 3 Fixed Layout Example</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                        <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="#">Tutorial Republic</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="http://www.aitechtonic.com" target="_blank">Home</a></li>
                        <li><a href="http://www.aitechtonic.com/about-us.php" target="_blank">About</a></li>
                        <li><a href="http://www.aitechtonic.com/contact-us.php" target="_blank">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="jumbotron">
                <h1>Learn to Create Websites</h1>
                <p>In today's world internet is the most popular way of connecting with the people. At <a href="http://www.aitechtonic.com" 
                target="_blank">aitechtonic.com</a> you will learn the essential of web development technologies a
                long with real life practice example,
                 so that you can create your own website to connect with the people around the world.</p>
                <p><a href="http://www.aitechtonic.com" target="_blank" class="btn btn-success btn-lg">Get
                 started today</a></p>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <h2>HTML</h2>
                    <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section 
                    will help you understand the basics of HTML,
                     so that you can create your own web pages or website.</p>
                    <p><a href="http://www.aitechtonic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »<
                    /a></p>
                </div>
                <div class="col-xs-4">
                    <h2>CSS</h2>
                    <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will 
                    help you learn the essentials of CSS, 
                    so that you can fine control the style and layout of your HTML document.</p>
                    <p><a href="http://www.aitechtonic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a>
                    </p>
                </div>
                <div class="col-xs-4">
                    <h2>Bootstrap</h2>
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. 
                    The Bootstrap tutorial section will help you 
                    learn the techniques of Bootstrap so that you can quickly create your own website.</p>
                    <p><a href="http://www.aitechtonic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More
                     »</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12">
                    <footer>
                        <p>© Copyright 2013 Tutorial Republic</p>
                    </footer>
                </div>
            </div>
        </div>
    </body>
    </html>
    
                        

    — The output of the above example will look something like this:

    Bootstrap Fixed Layout


    Bootstrap Fluid Layout

    In this tutorial you will learn how to create fluid layouts with Bootstrap.

    Creating Fluid Layout with Bootstrap

    In Bootstrap (version 3.2+), you can use the class .container-fluid to create the fluid layouts in order to utilize the 100% width of the viewport.

    The class .container-fluid simply applies the horizontal margin with the value auto and left and right padding of 15px on element to offset the left and right margin of -15px (i.e. margin: 0 -15px;) used on the .row.

    The following code creates a fluid layout that covers 100% width of the screen.

                    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Bootstrap 3 Fluid Layout Example</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                        <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="#">Tutorial Republic</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="http://www.aitechtonic.com" target="_blank">Home</a></li>
                        <li><a href="http://www.aitechtonic.com/about-us.php" target="_blank">About</a></li>
                        <li><a href="http://www.aitechtonic.com/contact-us.php" target="_blank">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="jumbotron">
            <div class="container-fluid">
                <h1>Learn to Create Websites</h1>
                <p>In today's world internet is the most popular way of connecting with the people. 
                At <a href="http://www.aitechtonic.com" target="_blank">aitechtonic.com</a> you will learn the essential 
                of web development technologies along with real life practice example, so that you can create your own website to connect 
                with the people around the world.</p>
                <p><a href="http://www.aitechtonic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-4">
                    <h2>HTML</h2>
                    <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section
                     will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
                    <p><a href="http://www.aitechtonic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More 
                    »</a></p>
                </div>
                <div class="col-xs-4">
                    <h2>CSS</h2>
                    <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the 
                    essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
                    <p><a href="http://www.aitechtonic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More 
                    »</a></p>
                </div>
                <div class="col-xs-4">
                    <h2>Bootstrap</h2>
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. 
                    The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly 
                    create your own website.</p>
                    <p><a href="http://www.aitechtonic.com/twitter-bootstrap-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12">
                    <footer>
                        <p>© Copyright 2013 Tutorial Republic</p>
                    </footer>
                </div>
            </div>
        </div>
    </body>
    </html>
    
    
                    
                    

    — The output of the above example will look something like this:

    Bootstrap Fluid Layout


    Bootstrap Responsive Layout

    In this tutorial you will learn how to create responsive web designs or layouts with Bootstrap framework.

    What is Responsive Web Design or Layout

    Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user.

    With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore the optimization of sites for mobile devices. Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much less efforts.

    Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.

    Bootstrap Responsive Design Illustration

    Creating Responsive Layout with Bootstrap

    With the new Bootstrap 3 mobile first grid system creating the responsive and mobile friendly websites has become much easier. As opposed to previous version you don't need to include any additional style sheet to enable responsive feature. Bootstrap 3 is responsive and mobile friendly from the start. Its four tiers grids classes provides better control over the layout as well as how it will be rendered on different types of devices like cell phones, tablets, desktop and laptops, large screen devices etc.

                   <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Bootstrap 3 Responsive Layout Example</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                        <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="#">Tutorial Republic</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="http://www.aitechtonic.com" target="_blank">Home</a></li>
                        <li><a href="http://www.aitechtonic.com/about-us.php" target="_blank">About</a></li>
                        <li><a href="http://www.aitechtonic.com/contact-us.php" target="_blank">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="jumbotron">
                <h1>Learn to Create Websites</h1>
                <p>In today's world internet is the most popular way of connecting with the people. 
                At <a href="http://www.aitechtonic.com" target="_blank">aitechtonic.com</a> you will learn 
                the essential of web development technologies along with real life practice example, so that you can create 
                your own website to connect with the people around the world.</p>
                <p><a href="http://www.aitechtonic.com" target="_blank" 
                class="btn btn-success btn-lg">Get started today</a></p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2">
                    <h2>HTML</h2>
                    <p>HTML is a markup language that is used for creating web pages. The HTML 
                    tutorial section will help you understand the basics of HTML, so that you can create your 
                    own web pages or website.</p>
                    <p><a href="http://www.aitechtonic.com/html-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2">
                    <h2>CSS</h2>
                    <p>CSS is used for describing the presentation of web pages. 
                    The CSS tutorial section will help you learn the essentials of CSS, so that you can 
                    fine control the style and layout of your HTML document.</p>
                    <p><a href="http://www.aitechtonic.com/css-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="clearfix visible-sm-block"></div>
                <div class="col-sm-6 col-md-4 col-lg-2">
                    <h2>Bootstrap</h2>
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. 
                    The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can 
                    create web your own website with much less efforts.</p>
                    <p><a href="http://www.aitechtonic.com/twitter-bootstrap-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="clearfix visible-md-block"></div>
                <div class="col-sm-6 col-md-4 col-lg-2">
                    <h2>References</h2>
                    <p>The references section outlines all the standard HTML tags and CSS properties along 
                    with other useful references such as color names and values, symbols and character entities, 
                    web safe fonts, language codes, HTTP messages and much more.</p>
                    <p><a href="http://www.aitechtonic.com/twitter-bootstrap-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="clearfix visible-sm-block"></div>
                <div class="col-sm-6 col-md-4 col-lg-2">
                    <h2>Examples</h2>
                    <p>The examples section encloses an extensive collection of examples on various 
                    topic that you can try and test yourself using online HTML editor.</p>
                    <p><a href="http://www.aitechtonic.com/twitter-bootstrap-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2">
                    <h2>FAQ</h2>
                    <p>The collection of Frequently Asked Questions (FAQ) provides brief answers to many 
                    common questions related to web design and development.</p>
                    <p><a href="http://www.aitechtonic.com/twitter-bootstrap-tutorial/" target="_blank" 
                    class="btn btn-success">Learn More »</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-sm-12">
                    <footer>
                        <p>© Copyright 2013 Tutorial Republic</p>
                    </footer>
                </div>
            </div>
        </div>
    </body>
    </html>
    
    
                   
  • BOOTSTRAP TYPOGRAPHY ↓

    Working with Headings

    You can define all HTML headings, <h1> through <h6> — In the same way you define in simple HTML document. You can also utilize the heading classes .h1 through .h6 on other elements, if you want to apply the style on element's text same as headings.

                       <h1@gt;h1. Bootstrap heading</h1>
                              <h2@gt;h2. Bootstrap heading</h2>
                               <h3@gt;h3. Bootstrap heading</h3>
                               <h4@gt;h4. Bootstrap heading</h4>
                               <h5@gt;h5. Bootstrap heading</h5>
                               <h6@gt;h6. Bootstrap heading</h6>
                         
    
                         

    — The output of the above example will look something like this:

    Bootstrap Headings

    Moreover you can use the <small> tag or <span> tag with .small class to display the secondary text of any heading in a smaller and lighter variation.

                            <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
                               <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
                               <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
                               <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
                               <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
                               <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
                            
    Bootstrap Headings with Secondary Text

    Creating Page Headers

    You can make your <h1> heading appear differently than rest of the headings on a page using the page header component. You can also utilize <small> tag to mark header subtext.

                    
                    <divclass="page-header">
    					<h1>Bootstrap <small>An intuitive front-end framework</small></h1>
    					</div>
                        
    Bootstrap Page Header

    Working with Paragraphs

    Bootstrap's global default font-size< is 14px, with a line-height of 1.428 This is applied to the <body> and all paragraphs. In addition to that a bottom margin of half their line-height (10px by default) is applied to the all paragraphs (<p>).

    You can also make a paragraph stand out by just adding the class .lead.

    <p>This is how a normal paragraph looks like in Bootstrap. </p>
                     <p class="lead">This is how a paragraph stands out in Bootstrap. </p>
                         

    — The HTML code in the above examples will produce the following result:

    Bootstrap Paragraphs

    You can easily align text inside a paragraph and other elements using text alignment classes.

                           <pclass = "text-left" @gt;Left aligned text. </p@gt; 
                               <pclass = "text-center" @gt;Center aligned text. </p@gt; 
                               <pclass = "text-right" @gt;Right aligned text. </p@gt; 
                               <pclass = "text-justify" @gt;Justified text. </p@gt; 
                               <pclass = "text-nowrap" @gt;No wrap text. </p@gt; 
                            
                            

    Bootstrap Text Formatting

    You are free to use text formatting tags like <strong>, <i>, <small> to make your text bold, italic, small and so on, in the same way you do in simple HTML.

                               <p><b> This is bold text </b></p> 
                               <p><big> This is big text </big></p> 
                               <p><code> This is computer code </code></p> 
                               <p><em> This is emphasized text </em></p> 
                               <p><i> This is italic text </i></p> 
                               <p><mark> This is highlighted text </mark></p> 
                               <p><small> This is small text </small></p> 
                               <p><strong> This is strongly emphasized text </strong></p> 
                               <p> This is  <sub>subscript </sub> and  <sup>superscript </sup></p> 
                               <p><ins> This text is inserted to the document </ins></p> 
                               <p><del> This text is deleted from the document </del></p> 
                                
                    

    — The output of the above example will look something like this:

    Bootstrap Text Formatting

    Text Transformation Classes

    You can also transform the text to lowercase, uppercase or make them capitalize.

                    <pclass="text-lowercase" >The quick brown fox jumps over the lazy dog. </p> 
                    <pclass="text-uppercase" >The quick brown fox jumps over the lazy dog. </p> 
                    <pclass="text-capitalize" >The quick brown fox jumps over the lazy dog. </p> 
                     

    — The output of the above example will look something like this:

    Bootstrap Text Transformation Classes

    Text Emphasis Classes

    Colors are the powerful method of conveying important information in website design.

    Bootstrap has handful of emphasis utility classes that can be used for this purpose such as showing success message in green color, warning or error message in red color, etc.

                      <p class="text-muted">Muted: This text is grayed out</p>
                                 <p class="text-primary">Important: Please read the instructions carefully before proceeding</p>
                                 <p class="text-success">Success: Your message has been sent successfully</p>
                                 <p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process</p>
                                 <p class="text-warning">Warning: There was a problem with your network connection</p>
                                 <p class="text-danger">Error: An error has been occurred while submitting your data</p>
                         

    — The output of the above example will look something like this:

    Bootstrap Text Emphasis Classes

    Styling Blockquotes

    You can also give pretty look to your blockquotes — Just define the blockquotes using the standard <blockquote> element and bootstrap's style sheet will do the rest.

    <blockquote>
                                    <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
                                <small>by <cite>Albert Einstein</cite></small>
                                </blockquote>
                    

    — The output of the above example will look something like this:

    Bootstrap Blockquotes

    Alternatively you can right-aligned the blockquote through floating it to right by simply applying the class .pull-right on the <blockquote> element.

    Albert Einstein </cite></small>
                         </blockquote>
                

    — The output of the above example will look something like this:

    Bootstrap Right Aligned Blockquotes
  • BOOTSTRAP TABLES ↓

    What is Table

    The HTML tables are used to present data in grid manner like row and columns. Using Bootstrap you can greatly improve the appearance of table in a simple way

    Creating a Simple Table with Bootstrap

    You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's class .table to the <table> element.

                         < table class="table">
        < thead>
            < tr>
                < th>Row< /th>
                < th>First Name< /th>
                < th>Last Name< /th>
                < th>Email< /th>
            < /tr>
        < /thead>
        < tbody>
            < tr>
                < td>1< /td>
                < td>John< /td>
                < td>Carter< /td>
                < td>johncarter@mail.com< /td>
            < /tr>
            < tr>
                < td>2< /td>
                < td>Peter< /td>
                < td>Parker< /td>
                < td>peterparker@mail.com< /td>
            < /tr>
            < tr>
                < td>3< /td>
                < td>John< /td>
                < td>Rambo< /td>
                < td>johnrambo@mail.com< /td>
            < /tr>
        < /tbody>
    < /table>
    
                         

    — The output of the above example will look something like this:

    Bootstrap Simple Table

    Tables with Alternate Background

    You can create table with alternate background like zebra-strips by simply adding the Bootstrap's class .table-striped to the .table base class.

    This is achieved by adding the background-color to the table row within <tbody> element via the :nth-child CSS selector (not supported in IE7-8).

                    < table class="table table-striped"> 
        < thead> 
            < tr> 
                < th> Row< /th> 
                < th> First Name< /th> 
                < th> Last Name< /th> 
                < th> Email< /th> 
            < /tr> 
        < /thead> 
        < tbody> 
            < tr> 
                < td> 1< /td> 
                < td> John< /td> 
                < td> Carter< /td> 
                < td> johncarter@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 2< /td> 
                < td> Peter< /td> 
                < td> Parker< /td> 
                < td> peterparker@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 3< /td> 
                < td> John< /td> 
                < td> Rambo< /td> 
                < td> johnrambo@mail.com< /td> 
            < /tr> 
        < /tbody> 
    < /table> 
    
                    
                    

    — The output of the above example will look something like this:

    Bootstrap Tables with Alternate Background

    Table with Borders

    You can also add borders to the all table cells by adding an extra Bootstrap's class .table-bordered to the .table base class.

                   < table class="table table-bordered"> 
        < thead> 
            < tr> 
                < th> Row< /th> 
                < th> First Name< /th> 
                < th> Last Name< /th> 
                < th> Email< /th> 
            < /tr> 
        < /thead> 
        < tbody> 
            < tr> 
                < td> 1< /td> 
                < td> John< /td> 
                < td> Carter< /td> 
                < td> johncarter@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 2< /td> 
                < td> Peter< /td> 
                < td> Parker< /td> 
                < td> peterparker@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 3< /td> 
                < td> John< /td> 
                < td> Rambo< /td> 
                < td> johnrambo@mail.com< /td> 
            < /tr> 
        < /tbody> 
    < /table> 
    
                   

    — The output of the above example will look something like this:

    Bootstrap Table with Borders

    Enable Hover State on Table Rows

    You can also enable a hover state on table rows within a <tbody> element by adding the Bootstrap's class .table-hover to the .table base class.

                    < table class="table table-hover"> 
        < thead> 
            < tr> 
                < th> Row< /th> 
                < th> First Name< /th> 
                < th> Last Name< /th> 
                < th> Email< /th> 
            < /tr> 
        < /thead> 
        < tbody> 
            < tr> 
                < td> 1< /td> 
                < td> John< /td> 
                < td> Carter< /td> 
                < td> johncarter@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 2< /td> 
                < td> Peter< /td> 
                < td> Parker< /td> 
                < td> peterparker@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 3< /td> 
                < td> John< /td> 
                < td> Rambo< /td> 
                < td> johnrambo@mail.com< /td> 
            < /tr> 
        < /tbody> 
    < /table> 
    
                    

    — The output of the above example will look something like this:

    Bootstrap Table with Hover States

    Condensed or Compact Table

    You can also make your tables more compact and save the space through adding an extra class .table-condensed to the .table base class. The class .table-condensed makes the table compact by cutting the cell padding in half.

                    
                    < table class="table table-condensed"> 
        < thead> 
            < tr> 
                < th> Row< /th> 
                < th> First Name< /th> 
                < th> Last Name< /th> 
                < th> Email< /th> 
            < /tr> 
        < /thead> 
        < tbody> 
            < tr> 
                < td> 1< /td> 
                < td> John< /td> 
                < td> Carter< /td> 
                < td> johncarter@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 2< /td> 
                < td> Peter< /td> 
                < td> Parker< /td> 
                < td> peterparker@mail.com< /td> 
            < /tr> 
            < tr> 
                < td> 3< /td> 
                < td> John< /td> 
                < td> Rambo< /td> 
                < td> johnrambo@mail.com< /td> 
            < /tr> 
        < /tbody> 
    < /table> 
    
                    

    — The output of the above example will look something like this:

    Bootstrap Condensed Table

    Optional Emphasis Classes for Table Rows

    There are some contextual classes to emphasize the row or individual cells data like success, warning, danger, etc. through coloring its background.

                   < table class="table"> 
        < thead> 
            < tr> 
                < th> Row< /th> 
                < th> Bill< /th> 
                < th> Payment Date< /th> 
                < th> Payment Status< /th> 
            < /tr> 
        < /thead> 
        < tbody> 
            < tr class="active"> 
                < td> 1< /td> 
                < td> Credit Card< /td> 
                < td> 04/07/2014< /td> 
                < td> Call in to confirm< /td> 
            < /tr> 
            < tr class="success"> 
                < td> 2< /td> 
                < td> Water< /td> 
                < td> 01/07/2014< /td> 
                < td> Paid< /td> 
            < /tr> 
            < tr class="info"> 
                < td> 3< /td> 
                < td> Internet< /td> 
                < td> 05/07/2014< /td> 
                < td> Change plan< /td> 
            < /tr> 
            < tr class="warning"> 
                < td> 4< /td> 
                < td> Electricity< /td> 
                < td> 03/07/2014< /td> 
                < td> Pending< /td> 
            < /tr> 
            < tr class="danger"> 
                < td> 5< /td> 
                < td> Telephone< /td> 
                < td> 06/07/2014< /td> 
                < td> Due< /td> 
            < /tr> 
        < /tbody> 
    < /table> 
    
                   

    — The output of the above example will look something like this:

    Bootstrap Table with Emphasis Classes

    Creating Responsive Tables with Bootstrap

    With Bootstrap 3 you can also create responsive tables to enable horizontal scrolling on small devices (screen width under 768px). However, viewing responsive tables on other devices having screen width larger than 768px, you will not see any difference.

    To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it, as demonstrated in the example below:

                    < div class="table-responsive">  
        < table class="table table-bordered"> 
            < thead> 
                < tr> 
                    < th> Row< /th> 
                    < th> First Name< /th> 
                    < th> Last Name< /th> 
                    < th> Email< /th> 
                    < th> Biography< /th> 
                < /tr> 
            < /thead> 
            < tbody> 
                < tr> 
                    < td> 1< /td> 
                    < td> John< /td> 
                    < td> Carter< /td> 
                    < td> johncarter@mail.com< /td> 
                    < td> Lorem ipsum dolor sit amet…< /td> 
                < /tr> 
                < tr> 
                    < td> 2< /td> 
                    < td> Peter< /td> 
                    < td> Parker< /td> 
                    < td> peterparker@mail.com< /td> 
                    < td> Vestibulum consectetur scelerisque…< /td> 
                < /tr> 
                < tr> 
                    < td> 3< /td> 
                    < td> John< /td> 
                    < td> Rambo< /td> 
                    < td> johnrambo@mail.com< /td> 
                    < td> Integer pulvinar leo id risus…< /td> 
                < /tr> 
            < /tbody> 
        < /table> 
    < /div> 
    
                    

    Supported Table Elements in Bootstrap

    The following table lists the supported HTML table elements and how they should be used.

    Tag Description
    <table> Wrapper element for displaying data in a tabular format.
    <caption> The title or summary of what the table holds.
    <thead> Container element for table header rows (<tr>) defines headings for table columns.
    <tbody> Container element for table rows (<tr>) that defines the body of a table.
    <tr> Container element for a set of table cells (<td> or <th>) that appears in a single row.
    <th> Special table cell for column headings.
    <td> Default table cell for placing data.
  • BOOTSTRAP LISTS ↓

    In this tutorial you will learn how to apply styles to different types of lists with Bootstrap.

    Creating Lists With Bootstrap

    You can define the three different types of lists:

    • Unordered lists — A list of items in which the order does not explicitly matter. The list items in unordered lists are marked with bullets.
    • Ordered lists — A list of items in which the order does explicitly matter. The list items in ordered lists are marked with numbers.
    • Definition list — A list of terms with their associated descriptions.

    Unstyled Ordered and Unordered Lists

    Sometimes you might need to remove the default styling form the list items. You can do this by simply applying the class .list-unstyled to the respective <ul> or <ol> elements.

                  < ul class="list-unstyled"> 
    < li> Home< /li> 
    < li> Products
    < ul> 
    < li> Gadgets< /li> 
    < li> Accessories< /li> 
    < /ul> 
    < /li> 
    < li> About Us< /li> 
    < li> Contact< /li> 
    < /ul> 
    
                  

    — The output of the above example will look something like this:

    Bootstrap Unstyled List

    Placing Ordered and Unordered List Items Inline

    If you want to create a horizontal menu using ordered or unordered list you need to place all list items in a single line i.e. side by side. You can do this by simply applying the Bootstrap's class .list-inline to the respective <ul> or <ol> elements. The .list-inline class also adds some left and right padding (5px by default) to the all list items.

                   < ul class="list-inline"> 
        < li> Home< /li> 
        < li> Products< /li> 
        < li> About Us< /li> 
        < li> Contact< /li> 
    < /ul> 
    
                   

    — The output of the above example will look something like this:

    Bootstrap Inline List

    Creating Horizontal Definition Lists

    The terms and descriptions in definition lists can also be placed side-by-side using the Bootstrap's class .dl-horizontal. The terms in horizontal definition lists will be truncated if is too long to fit in the left column (160px by default), however in narrower viewports they will change to the default stacked layout.

                    < dl class="dl-horizontal"> 
        < dt> User Agent< /dt> 
        < dd> An HTML user agent is any device that interprets HTML documents.< /dd> 
        < dt> Client-side Scripting< /dt> 
        < dd> Client-side scripting generally refers to the category of computer 
        programs on the web that are executed client-side i.e. by the user's web browser.< /dd> 
        < dt> Document Tree< /dt> 
        < dd> The tree of elements encoded in the source document.< /dd> 
    < /dl> 
    
                    

    — The output of the above example will look something like this:

    Bootstrap Horizontal Definition List

    Bootstrap List Groups

    The list groups are very useful component for displaying lists of items in a beautiful manner. In most basic form a list group is simply an unordered list with list items and proper classes.

                    
    < ul class="list-group"> 
        < li class="list-group-item"> Pictures< /li> 
        < li class="list-group-item"> Documents< /li>         
        < li class="list-group-item"> Music< /li> 
        < li class="list-group-item"> Videos< /li> 
    < /ul> 
    
                    

    — The output of the above example will look something like this:

    Bootstrap List Group

    Further you can hyperlinklist group items with the little change in HTML markup.

    Just replace the <li> with <a> tag and use <div> element as a parent instead of <ul>. You can also add icons and badges to this list group to make it more elegant. The badges component will automatically be positioned on the right.

                    < div class="list-group"> 
        < a href="#" class="list-group-item active"> 
            < span class="glyphicon glyphicon-camera"> < /span>  Pictures < span class="badge"> 25< /span> 
        < /a> 
        < a href="#" class="list-group-item"> 
            < span class="glyphicon glyphicon-file"> < /span>  Documents < span class="badge"> 145< /span> 
        < /a> 
        < a href="#" class="list-group-item"> 
            < span class="glyphicon glyphicon-music"> < /span>  Music < span class="badge"> 50< /span> 
        < /a> 
        < a href="#" class="list-group-item"> 
            < span class="glyphicon glyphicon-film"> < /span>  Videos < span class="badge"> 8< /span> 
        < /a> 
    < /div> 
    
                    

    — The output of the above example will look something like this:

    Bootstrap List Group with Linked Items

    You can also add other HTML elements like headings and paragraph within these list groups.

                     
                     < div class="list-group"> 
        < a href="#" class="list-group-item"> 
            < h4 class="list-group-item-heading"> What is HTML?< /h4> 
            < p class="list-group-item-text"> HTML stands for HyperText Markup Language. 
            HTML is the main markup language for describing the structure of Web pages.< /p> 
        < /a> 
        < a href="#" class="list-group-item active"> 
            < h4 class="list-group-item-heading"> What is Bootstrap?< /h4> 
            < p class="list-group-item-text"> Bootstrap is a powerful front-end framework for 
            faster and easier web development. It is a collection of HTML and CSS based design template.< /p> 
        < /a> 
        < a href="#" class="list-group-item"> 
            < h4 class="list-group-item-heading"> What is CSS?< /h4> 
            < p class="list-group-item-text"> CSS stands for Cascading Style Sheet. 
            CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.< /p> 
        < /a> 
    < /div> 
    
                     

    — The output of the above example will look something like this:

    Bootstrap Linked List Group with Custom Content

    List Groups with Contextual States

    Like most of the other components you can also use contextual classes on the list group items to apply extra emphasis on them, like this:

                    < ul class="list-group"> 
        < li class="list-group-item list-group-item-success"> 200 OK: 
        The server successfully processed the request.< /li> 
        < li class="list-group-item list-group-item-info"> 100 Continue: 
        The client should continue with its request.< /li> 
        < li class="list-group-item list-group-item-warning"> 503 Service Unavailable: 
        The server is temporarily unable to handle the request.< /li> 
        < li class="list-group-item list-group-item-danger"> 400 Bad Request:
         The request cannot be fulfilled due to bad syntax.< /li> 
    < /ul> 
    
                    
                    

    — The output of the above example will look something like this:

    Bootstrap List Group with Contextual States

    Similarly, you can use these contextual classes to the linked list group items. You can also use the class .active to specify the active list group item.

                    < div class="list-group"> 
        < a href="#" class="list-group-item list-group-item-success"> 200 OK: 
        
        The server successfully processed the request.< /a> 
        < a href="#" class="list-group-item list-group-item-info active"> 100 Continue: The client should continue with its request.< /a> 
        < a href="#" class="list-group-item list-group-item-warning"> 503 Service Unavailable: 
        The server is temporarily unable to handle the request.< /a> 
        < a href="#" class="list-group-item list-group-item-danger"> 400 Bad Request: 
        The request cannot be fulfilled due to bad syntax.< /a> 
    < /div> 
    
                    
  • BOOTSTRAP IMAGES ↓

    In this tutorial you will learn how to style images, creating thumbnails, grids of images and videos, and so on using Bootstrap.

    Styling Images with Bootstrap

    Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience.

    Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.

                   <img src="125x125.jpg" class="img-rounded" alt="Rounded Image">
    <img src="125x125.jpg" class="img-circle" alt="Circular Image">
    <img src="125x125.jpg" class="img-thumbnail" alt="Thumbnail Image">
    
                   

    — The output of the above example will look something like this:

    Bootstrap Image Styling

    Creating Responsive Images and Videos

    In Bootstrap you can make the images responsive too. Just add the class .img-responsive to the <img> tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it scales nicely to fit the containing element — in case if the width of the image is larger than the containing element itself.

                     <img src="kites.jpg" class="img-responsive" alt="Flying Kites">
    <img src="sky.jpg" class="img-responsive" alt="Cloudy Sky">
    <img src="balloons.jpg" class="img-responsive" alt="Hot Air Balloons">
    
                     

    You can also make the video or slideshow embedded in a web page responsive without affecting its original aspect ratio. The Bootstrap responsive embed classes can be applied directly to the <iframe>, <embed>, <video>, and <object> elements.

                     <!-- 16:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
     
    <!-- 4:3 aspect ratio -->
    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
    

    In the above example, we've created the two responsive videos with two different aspect ratios (16:9 and 4:3) by adding the classes .embed-responsive-16by9 and .embed-responsive-4by3 to their containing blocks respectively and the class .embed-responsive-item to the descendant <iframe> element.

    Bootstrap Thumbnails

    The Bootstrap thumbnail component is very useful for creating grids of images or videos, lists of products, portfolios, and much more. The following example will show you how to create thumbnails to showcase linked images.

                    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="125x125.jpg" alt="125x125">
                </a>
            </div>
        </div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Thumbnails

    You can also insert HTML content like headings, paragraphs, or buttons into thumbnails.

                    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="thumbnail">
                    <img src="avatar.jpg" alt="Sample Image">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Thumbnail description…</p>
                        <p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Download</a></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="thumbnail">
                    <img src="avatar.jpg" alt="Sample Image">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Thumbnail description…</p>
                        <p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Download</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
                    

    Bootstrap Media Objects

    Sometimes you may want to create a layout that contains left- or right-aligned image along with the textual content like blog comments. You can do this easily through the newly introduced Bootstrap media component, like this.

                    <div class="media">
        <a href="#" class="pull-left">
            <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Jhon Carter <small><i>Posted on January 10, 
            2014</i></small></h4>
            <p>Excellent feature! I love it. One day I'm definitely going to put this 
            Bootstrap component into use and I'll let you know once I do.</p>
        </div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Media Objects
                     <ul class="media-list">
        <li class="media">
            <a href="#" class="pull-left">
                <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Heading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipis elit…</p>
                <!-- Nested media object -->
                <div class="media">
                    <a href="#" class="pull-left">
                        <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Nested Media Heading</h4>
                        <p>Vestibulum consectetur scelerisque faucibus…</p>
                        <!-- Nested media object -->
                        <div class="media">
                            <a href="#" class="pull-left">
                                <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Nested Media Heading</h4>
                                <p>Integer pulvinar leo id risus tempor…</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Nested media object -->
                <div class="media">
                    <a href="#" class="pull-left">
                        <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Nested Media Heading</h4>
                        <p>Phasellus vitae suscipit justo mauris…</p>
                    </div>
                </div>
            </div>
        </li>
        <li class="media">
            <a href="#" class="pull-left">
                <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Heading</h4>
                <p>Quisque pharetra velit id velit iaculis pretium…</p>
            </div>
        </li>
    </ul>
    
                     
  • BOOTSTRAP ICONS ↓

    Icons by Glyphicons

    Bootstrap 3.3.5 includes more than 250 Glyphicons. As opposed to previous sprite version these icons are available in font format for better usability and scalability.

    Since these Glyphicons are font based now you can create icons of any color just applying the CSS color property on the specific element.

    • glyphicon glyphicon-asterisk
    • glyphicon glyphicon-plus
    • glyphicon glyphicon-euro
    • glyphicon glyphicon-eur
    • glyphicon glyphicon-minus
    • glyphicon glyphicon-cloud
    • glyphicon glyphicon-envelope
    • glyphicon glyphicon-pencil
    • glyphicon glyphicon-glass
    • glyphicon glyphicon-music
    • glyphicon glyphicon-search
    • glyphicon glyphicon-heart
    • glyphicon glyphicon-star
    • glyphicon glyphicon-star-empty
    • glyphicon glyphicon-user
    • glyphicon glyphicon-film
    • glyphicon glyphicon-th-large
    • glyphicon glyphicon-th
    • glyphicon glyphicon-th-list
    • glyphicon glyphicon-ok
    • glyphicon glyphicon-remove
    • glyphicon glyphicon-zoom-in
    • glyphicon glyphicon-zoom-out
    • glyphicon glyphicon-off
    • glyphicon glyphicon-signal
    • glyphicon glyphicon-cog
    • glyphicon glyphicon-trash
    • glyphicon glyphicon-home
    • glyphicon glyphicon-file
    • glyphicon glyphicon-time
    • glyphicon glyphicon-road
    • glyphicon glyphicon-download-alt
    • glyphicon glyphicon-download
    • glyphicon glyphicon-upload
    • glyphicon glyphicon-inbox
    • glyphicon glyphicon-play-circle
    • glyphicon glyphicon-repeat
    • glyphicon glyphicon-refresh
    • glyphicon glyphicon-list-alt
    • glyphicon glyphicon-lock
    • glyphicon glyphicon-flag
    • glyphicon glyphicon-headphones
    • glyphicon glyphicon-volume-off
    • glyphicon glyphicon-volume-down
    • glyphicon glyphicon-volume-up
    • glyphicon glyphicon-qrcode
    • glyphicon glyphicon-barcode
    • glyphicon glyphicon-tag
    • glyphicon glyphicon-tags
    • glyphicon glyphicon-book
    • glyphicon glyphicon-bookmark
    • glyphicon glyphicon-print
    • glyphicon glyphicon-camera
    • glyphicon glyphicon-font
    • glyphicon glyphicon-bold
    • glyphicon glyphicon-italic
    • glyphicon glyphicon-text-height
    • glyphicon glyphicon-text-width
    • glyphicon glyphicon-align-left
    • glyphicon glyphicon-align-center
    • glyphicon glyphicon-align-right
    • glyphicon glyphicon-align-justify
    • glyphicon glyphicon-list
    • glyphicon glyphicon-indent-left
    • glyphicon glyphicon-indent-right
    • glyphicon glyphicon-facetime-video
    • glyphicon glyphicon-picture
    • glyphicon glyphicon-map-marker
    • glyphicon glyphicon-adjust
    • glyphicon glyphicon-tint
    • glyphicon glyphicon-edit
    • glyphicon glyphicon-share
    • glyphicon glyphicon-check
    • glyphicon glyphicon-move
    • glyphicon glyphicon-step-backward
    • glyphicon glyphicon-fast-backward
    • glyphicon glyphicon-backward
    • glyphicon glyphicon-play
    • glyphicon glyphicon-pause
    • glyphicon glyphicon-stop
    • glyphicon glyphicon-forward
    • glyphicon glyphicon-fast-forward
    • glyphicon glyphicon-step-forward
    • glyphicon glyphicon-eject
    • glyphicon glyphicon-chevron-left
    • glyphicon glyphicon-chevron-right
    • glyphicon glyphicon-plus-sign
    • glyphicon glyphicon-minus-sign
    • glyphicon glyphicon-remove-sign
    • glyphicon glyphicon-ok-sign
    • glyphicon glyphicon-question-sign
    • glyphicon glyphicon-info-sign
    • glyphicon glyphicon-screenshot
    • glyphicon glyphicon-remove-circle
    • glyphicon glyphicon-ok-circle
    • glyphicon glyphicon-ban-circle
    • glyphicon glyphicon-arrow-left
    • glyphicon glyphicon-arrow-right
    • glyphicon glyphicon-arrow-up
    • glyphicon glyphicon-arrow-down
    • glyphicon glyphicon-share-alt
    • glyphicon glyphicon-resize-full
    • glyphicon glyphicon-resize-small
    • glyphicon glyphicon-exclamation-sign
    • glyphicon glyphicon-gift
    • glyphicon glyphicon-leaf
    • glyphicon glyphicon-fire
    • glyphicon glyphicon-eye-open
    • glyphicon glyphicon-eye-close
    • glyphicon glyphicon-warning-sign
    • glyphicon glyphicon-plane
    • glyphicon glyphicon-calendar
    • glyphicon glyphicon-random
    • glyphicon glyphicon-comment
    • glyphicon glyphicon-magnet
    • glyphicon glyphicon-chevron-up
    • glyphicon glyphicon-chevron-down
    • glyphicon glyphicon-retweet
    • glyphicon glyphicon-shopping-cart
    • glyphicon glyphicon-folder-close
    • glyphicon glyphicon-folder-open
    • glyphicon glyphicon-resize-vertical
    • glyphicon glyphicon-resize-horizontal
    • glyphicon glyphicon-hdd
    • glyphicon glyphicon-bullhorn
    • glyphicon glyphicon-bell
    • glyphicon glyphicon-certificate
    • glyphicon glyphicon-thumbs-up
    • glyphicon glyphicon-thumbs-down
    • glyphicon glyphicon-hand-right
    • glyphicon glyphicon-hand-left
    • glyphicon glyphicon-hand-up
    • glyphicon glyphicon-hand-down
    • glyphicon glyphicon-circle-arrow-right
    • glyphicon glyphicon-circle-arrow-left
    • glyphicon glyphicon-circle-arrow-up
    • glyphicon glyphicon-circle-arrow-down
    • glyphicon glyphicon-globe
    • glyphicon glyphicon-wrench
    • glyphicon glyphicon-tasks
    • glyphicon glyphicon-filter
    • glyphicon glyphicon-briefcase
    • glyphicon glyphicon-fullscreen
    • glyphicon glyphicon-dashboard
    • glyphicon glyphicon-paperclip
    • glyphicon glyphicon-heart-empty
    • glyphicon glyphicon-link
    • glyphicon glyphicon-phone
    • glyphicon glyphicon-pushpin
    • glyphicon glyphicon-usd
    • glyphicon glyphicon-gbp
    • glyphicon glyphicon-sort
    • glyphicon glyphicon-sort-by-alphabet
    • glyphicon glyphicon-sort-by-alphabet-alt
    • glyphicon glyphicon-sort-by-order
    • glyphicon glyphicon-sort-by-order-alt
    • glyphicon glyphicon-sort-by-attributes
    • glyphicon glyphicon-sort-by-attributes-alt
    • glyphicon glyphicon-unchecked
    • glyphicon glyphicon-expand
    • glyphicon glyphicon-collapse-down
    • glyphicon glyphicon-collapse-up
    • glyphicon glyphicon-log-in
    • glyphicon glyphicon-flash
    • glyphicon glyphicon-log-out
    • glyphicon glyphicon-new-window
    • glyphicon glyphicon-record
    • glyphicon glyphicon-save
    • glyphicon glyphicon-open
    • glyphicon glyphicon-saved
    • glyphicon glyphicon-import
    • glyphicon glyphicon-export
    • glyphicon glyphicon-send
    • glyphicon glyphicon-floppy-disk
    • glyphicon glyphicon-floppy-saved
    • glyphicon glyphicon-floppy-remove
    • glyphicon glyphicon-floppy-save
    • glyphicon glyphicon-floppy-open
    • glyphicon glyphicon-credit-card
    • glyphicon glyphicon-transfer
    • glyphicon glyphicon-cutlery
    • glyphicon glyphicon-header
    • glyphicon glyphicon-compressed
    • glyphicon glyphicon-earphone
    • glyphicon glyphicon-phone-alt
    • glyphicon glyphicon-tower
    • glyphicon glyphicon-stats
    • glyphicon glyphicon-sd-video
    • glyphicon glyphicon-hd-video
    • glyphicon glyphicon-subtitles
    • glyphicon glyphicon-sound-stereo
    • glyphicon glyphicon-sound-dolby
    • glyphicon glyphicon-sound-5-1
    • glyphicon glyphicon-sound-6-1
    • glyphicon glyphicon-sound-7-1
    • glyphicon glyphicon-copyright-mark
    • glyphicon glyphicon-registration-mark
    • glyphicon glyphicon-cloud-download
    • glyphicon glyphicon-cloud-upload
    • glyphicon glyphicon-tree-conifer
    • glyphicon glyphicon-tree-deciduous
    • glyphicon glyphicon-cd
    • glyphicon glyphicon-save-file
    • glyphicon glyphicon-open-file
    • glyphicon glyphicon-level-up
    • glyphicon glyphicon-copy
    • glyphicon glyphicon-paste
    • glyphicon glyphicon-alert
    • glyphicon glyphicon-equalizer
    • glyphicon glyphicon-king
    • glyphicon glyphicon-queen
    • glyphicon glyphicon-pawn
    • glyphicon glyphicon-bishop
    • glyphicon glyphicon-knight
    • glyphicon glyphicon-baby-formula
    • glyphicon glyphicon-tent
    • glyphicon glyphicon-blackboard
    • glyphicon glyphicon-bed
    • glyphicon glyphicon-apple
    • glyphicon glyphicon-erase
    • glyphicon glyphicon-hourglass
    • glyphicon glyphicon-lamp
    • glyphicon glyphicon-duplicate
    • glyphicon glyphicon-piggy-bank
    • glyphicon glyphicon-scissors
    • glyphicon glyphicon-bitcoin
    • glyphicon glyphicon-btc
    • glyphicon glyphicon-xbt
    • glyphicon glyphicon-yen
    • glyphicon glyphicon-jpy
    • glyphicon glyphicon-ruble
    • glyphicon glyphicon-rub
    • glyphicon glyphicon-scale
    • glyphicon glyphicon-ice-lolly
    • glyphicon glyphicon-ice-lolly-tasted
    • glyphicon glyphicon-education
    • glyphicon glyphicon-option-horizontal
    • glyphicon glyphicon-option-vertical
    • glyphicon glyphicon-menu-hamburger
    • glyphicon glyphicon-modal-window
    • glyphicon glyphicon-oil
    • glyphicon glyphicon-grain
    • glyphicon glyphicon-sunglasses
    • glyphicon glyphicon-text-size
    • glyphicon glyphicon-text-color
    • glyphicon glyphicon-text-background
    • glyphicon glyphicon-object-align-top
    • glyphicon glyphicon-object-align-bottom
    • glyphicon glyphicon-object-align-horizontal
    • glyphicon glyphicon-object-align-left
    • glyphicon glyphicon-object-align-vertical
    • glyphicon glyphicon-object-align-right
    • glyphicon glyphicon-triangle-right
    • glyphicon glyphicon-triangle-left
    • glyphicon glyphicon-triangle-bottom
    • glyphicon glyphicon-triangle-top
    • glyphicon glyphicon-console
    • glyphicon glyphicon-superscript
    • glyphicon glyphicon-subscript
    • glyphicon glyphicon-menu-left
    • glyphicon glyphicon-menu-right
    • glyphicon glyphicon-menu-down
    • glyphicon glyphicon-menu-up

    How to Use Icons in Your Code

    To use the Bootstrap icons you will require an <span> tag along with a base class glyphicon and an individual icon class glyphicon-*. The general syntax for using Bootstrap icons is:

    <span class="glyphicon glyphicon-class-name"></span>

    Where "glyphicon-class-name" is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css.

    For example, to use search icon you can place the following code just about anywhere:

                    <button type="submit" class="btn btn-default">
    <span class="glyphicon glyphicon-search">
    </span> Search</button>
    <button type="submit" class="btn btn-primary">
    <span class="glyphicon glyphicon-search"></span> Search</button>
    
                    
                    

    — The output of the above example will look something like this:

    Bootstrap Icons
  • BOOTSTRAP NAV: TABS AND PILLS ↓

    In this tutorial you will learn how to create Bootstrap nav components.

    Bootstrap Nav Components

    Bootstrap provides an easy way to create basic nav components like tabs and pills. All the Bootstrap's nav components—tabs and pills—share the same base markup and styles through the base .nav class.

    Creating Basic Tabs with Bootstrap

    The following example will show you how to create a basic tab component using Bootstrap.

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

    — The output of the above example will look something like this:

    Bootstrap Tabs

    Adding Icons to Tabs

    You can also add icons to your tabs to make it more attractive.

                   
                   <ul class="nav nav-tabs">
        <li class="active"><a href="#"><span 
        class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li><a href="#"><span class="glyphicon 
        glyphicon-user"></span> Profile</a></li>
        <li><a href="#"><span class="glyphicon 
        glyphicon-envelope"></span> Messages</a></li>
    </ul>
    
    
                   

    — The output of the above example will look something like this:

    Bootstrap Tabs with Icons

    Creating Basic Pills Nav with Bootstrap

    Similarly you can create a basic pill based navigation using the base class .nav-pills instead of .nav-tabs, without any further change in markup.

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

    — The output of the above example will look something like this:

    Bootstrap Pills Nav

    Adding Icons to Pills Nav

    You can also add icons to your pills nav to make it more attractive.

                    
                    <ul class="nav nav-pills">
        <li class="active"><a href="#"><span
        class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li><a href="#"><span class="glyphicon 
        glyphicon-user"></span> Profile</a></li>
        <li><a href="#"><span class="glyphicon 
        glyphicon-envelope"></span> Messages</a></li>
    </ul>
    
    
                    

    — The output of the above example will look something like this:

    Bootstrap Pills Nav with Icons

    Stacked Pills Nav

    Pills navigations are horizontal by default. To make them appear vertically stacked, just add an extra class .nav-stacked to the <ul> element.

                    

    — The output of the above example will look something like this:

    Bootstrap Stacked Pills

    Bootstrap Tabs and Pills Nav with Dropdown Menus

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

    The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu and .caret are required in addition to the .nav, .nav-tabs, .nav-pills to create a simple dropdown menu.

    Creating Tabs with Dropdowns

    The following example will show you how to add simple dropdown menus to a tab.

                    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Sent Items</a></li>
                <li class="divider"></li>
                <li><a href="#">Trash</a></li>
            </ul>
        </li>
    </ul>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Tabs with Dropdown Menus

    Creating Pills with Dropdowns

    The following example will show you how to add simple dropdown menus to a pill nav.

                    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Sent Items</a></li>
                <li class="divider"></li>
                <li><a href="#">Trash</a></li>
            </ul>
        </li>
    </ul>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Pills with Dropdown Menus

    Justified Tabs and Pills

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

                    <!-- Justified tabs -->
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <!-- Justified pills -->
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    
                    

    Disable Links inside Nav Components

    You can also make any link inside the navs to appear as disabled using the class .disabled.

                    <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
        <li class="disabled"><a href="#">Admin</a></li>
    </ul>
    
                    
  • BOOTSTRAP NAVBAR ↓

    In this tutorial you will learn how to create the static and fixed navigation headers using the Bootstrap navbar component.

    Creating a Simple Navbar with Bootstrap

    You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. However, it will be horizontal as normal on the medium and large devices like laptop or desktop.

    You can also create different variations of the navbar such as navbars with dropdown menus and search boxes as well as fixed positioned navbar with much less effort. The following example will show you how to create a simple static navbar with navigation links.

                    <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">Brand</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="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Static Navbar

    You can also include dropdowns and search form within navbars.

                    <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">Brand</a>
        </div>
        <!-- Collection of nav links, forms, 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="#">Profile</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Sent Items</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Trash</a></li>
                    </ul>
                </li>
            </ul>
            <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
    
                    
                    

    — The output of the above example will look something like this:

    Bootstrap Static Navbar with Dropdown and Search Form

    Bootstrap Fixed Navbar

    Bootstrap also provides mechanism to create navbar that is fixed on the top or bottom of the viewport and will scroll with the content on the page.

    Creating Navbar Fixed to Top

    Add an extra class .navbar-fixed-top in addition to the .navbar and .navbar-default base class to create navbars that is fixed on the top.

                  <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- 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">Brand</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="#">Profile</a></li>
                    <li><a href="#">Messages</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
    
                  

    Creating Navbar Fixed to Bottom

    Similarly to create navbars that is fixed at the bottom add the class .navbar-fixed-bottom.

                    <nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
        <div class="container-fluid">
            <!-- 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">Brand</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="#">Profile</a></li>
                    <li><a href="#">Messages</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
    
                    

    Bootstrap Static Top Navbar

    You can also create full-width navbar that appears on the top but scrolls away with the page by adding the class .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the <body> element.

                   <nav role="navigation" class="navbar navbar-default navbar-static-top">
        <div class="container">
            <!-- 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">Brand</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="#">Profile</a></li>
                    <li><a href="#">Messages</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
    
                   

    Bootstrap Navbar with Search From

    Search form is very common component of the navbars and you have seen it on various website quite often. Search form can be placed inside the navbar using the class .navbar-form on the <form> element.

                   <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">Brand</a>
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </nav>
    
                   

    Creating the Inverted Variation of a Navbar

    You can also create inverted variation of the Bootstrap navbar by adding an extra class .navbar-inverse to the .navbar base class, without any further change in markup.

                    <nav role="navigation" class="navbar navbar-inverse">
        <!-- 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">Brand</a>
        </div>
        <!-- Collection of nav links, forms, 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="#">Profile</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Sent Items</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Trash</a></li>
                    </ul>
                </li>
            </ul>
            <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Responsive Navbar Inverted Variation
  • BOOTSTRAP PANEL & BREADCRUMBS ↓

    In this tutorial you will learn how to create panels with Bootstrap.

    Introducing Bootstrap 3 Panels

    Sometimes you might require to put your content in box for certain reason. In such situation the Bootstrap panel component can be very useful. In most basic form the panel component applies some border and padding around the content.

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

    — The output of the above example will look something like this:

    Bootstrap Panels

    Panels with Heading

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

                    <div class="panel panel-default">
        <div class="panel-heading">This Page is Disabled</div>
        <div class="panel-body">This page is temporarily disabled by the site 
        administrator for some reason.<br> <a href="#">Click here</a> to enable the page.</div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Panels with Heading

    You can also include heading elements from <h1> to <h6> with a .panel-title class.

                    <div class="panel panel-default">
        <div class="panel-heading">
            <h1 class="panel-title">Panel Title</h1>
        </div>
        <div class="panel-body">Panel content…</div>
    </div>
    
                    

    Panels with Footer

    Like heading you can also add footer section to your panels using the .panel-footer class. The panel's footer can be used to wrap buttons or secondary text.

                    <div class="panel panel-default">
        <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div> 
        <div class="panel-footer clearfix">
            <div class="pull-right">
                <a href="#" class="btn btn-primary">Learn More</a>
                <a href="#" class="btn btn-default">Go Back</a>
            </div>
        </div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Panels with Footer

    Panels with Contextual States

    Like other component you also add contextual state classes like .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger on the panel components to make it more meaningful and drawing attention of the user.

                    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">301 Moved Permanently</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">200 OK</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">100 Continue</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">400 Bad Request</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">503 Service Unavailable</h3>
        </div>
        <div class="panel-body">The server is temporarily unable to handle the request.</div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Panels with Contextual States

    Placing Tables and List Groups inside Panels

    You can add any non-bordered table within a panel to create more informative tables.

                    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">User Information</div>
        <div class="panel-body">
            <p>The following table contains some personal information about users.</p>
        </div>
        <!-- Table -->
        <table class="table">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>johncarter@mail.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>peterparker@mail.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                </tr>
            </tbody> 
        </table>
    </div>
    
                    

    Similarly you can include full-width list groups within any panel.

                    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Products</div>
        <div class="panel-body">
            <p>The following products are currently available on our store.</p>
        </div>
        <!-- List group -->
        <div class="list-group">
            <a href="#" class="list-group-item">Mobile Phones <span class="badge">50</span>
            </a>
            <a href="#" class="list-group-item">Laptops & Desktops <span class="badge">145</span>
            </a>
            <a href="#" class="list-group-item">Tablets <span class="badge">30</span>
            </a>  
            <a href="#" class="list-group-item">Audio & Video Players <span class="badge">65</span>
            </a>
            <a href="#" class="list-group-item">Camera <span class="badge">8</span>
            </a>
        </div>
    </div>
    
                    


    A breadcrumb is a navigation scheme that indicates the user's location in a website or web application. Breadcrumb navigation can greatly enhance the accessibility of websites having large number of pages.

                    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li class="active">Accessories</li>
    </ul>
    
                    
    Bootstrap Breadcrumbs
  • BOOTSTRAP PAGINATION ↓

    In this tutorial you will learn how to create pagination with Bootstrap.

    Creating Pagination with Bootstrap

    Pagination is the process of organizing content by dividing it into separate pages.

    Pagination is used in some or other form quite often in almost every web application, for instance it is used by search engines for displaying a limited number of results on search results pages, or showing a limited number of posts for every page on a blog or forum.

                    <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>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Pagination

    Pagination with Disabled and Active States

    Links inside Bootstrap pagination can further be customized for different circumstances such as when user approaches to an end or start, or indicating current page number to the user. Use the class .disabled for making the links unclickable and .active to indicate the current page.

                  <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>
    
                  

    — The output of the above example will look something like this:

    Bootstrap Pagination with Disabled and Active States
                    <ul class="pagination">
        <li class="disabled"><span>«</span></li>
        <li class="active"><span>1</span></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>
    
    
                    

    Changing the Sizes of Pagination

    You can also change the sizes of pagination to increase or decrease the clickable area.

    Add the relative sizing classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination.

                   <!-- 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>
    
                   

    — The output of the above example will look something like this:

    Bootstrap Larger and Smaller Pagination

    Bootstrap Pager

    Sometimes you may simply require previous and next links on your website to provide simple and quick navigation to the user instead of the complex pagination as we discussed above.

    This can be done using the Bootstrap class .pager.

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

    — The output of the above example will look something like this:

    Bootstrap Pager

    Alignment of Pager

    By default pager are aligned horizontally center but you align previous link to left and next link right using the class .previous and .next respectively.

                  <ul class="pager">
        <li class="previous"><a href="#">← Previous</a></li>
        <li class="next"><a href="#">Next →</a></li>
    </ul>
    
                  

    — The output of the above example will look something like this:

    Bootstrap Pager Left-Right Aligned

    You can also apply the same pagination classes .disabled and .active to the pager.

                    <ul class="pager">
        <li class="previous disabled"><a href="#">← Previous</a></li>
        <li class="next"><a href="#">Next →</a></li>
    </ul>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Pager with Disabled State
  • BOOTSTRAP LABELS AND BADGES ↓

    In this tutorial you will learn how to create inline labels and badges with Bootstrap.

    Creating Inline Labels

    Inline labels are generally used to indicate some valuable information on the web pages such as important notes, warning messages, etc.

    The following example will show you how to create inline labels using the Bootstrap.

                   <h1>Bootstrap heading <span class="label label-default">New</span></h1>
    <h2>Bootstrap heading <span class="label label-default">New</span></h2>
    <h3>Bootstrap heading <span class="label label-default">New</span></h3>
    <h4>Bootstrap heading <span class="label label-default">New</span></h4>
    <h5>Bootstrap heading <span class="label label-default">New</span></h5>
    <h6>Bootstrap heading <span class="label label-default">New</span></h6>
    
                   

    — The output of the above example will look something like this:

    Bootstrap Inline Labels

    There are some contextual classes to emphasize these inline labels.

                    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Label Emphasis Classes

    Creating Inline Badges

    Similarly you can create inline badges to provide important notification to the user such as number received or unread messages, number of friend requests etc. They're most commonly found in email client and social networking websites.

                    <ul class="nav nav-pills">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="active"><a href="#">Messages <span class="badge">24</span></a></li>
        
        <li><a href="#">Notification  <span class="badge">5</span></a></li>
    </ul>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Inline Badges
  • BOOTSTRAP PROGRESS BAR ↓

    In this tutorial you will learn how to create progress bars using Bootstrap.

    Creating Progress Bar with Bootstrap

    Progress bars can be used for showing the progress of a task or action to the users. The following example will show how you to create a simple progress bar with vertical gradient.

                  <div class="progress">
        <div class="progress-bar" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    
                  

    — The output of the above example will look something like this:

    Bootstrap Basic Progress Bar

    Creating Progress Bar with Label

    To show to the progress status as a percentage label just remove the <span> with .sr-only class from within the progress bar as demonstrated in example above.

                    <div class="progress">
        <div class="progress-bar" style="width: 60%;">
            60%
        </div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Basic Progress Bar with Label

    If you are showing percentage label you should also add a min-width to the progress bar to ensure that the label text remains readable even for low percentage, like this.

                    <div class="progress">
        <div class="progress-bar" style="min-width: 20px;">
            0%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="min-width: 20px; width: 2%;">
            2%
        </div>
    </div>
    
                    

    Creating Stripped Progress Bar

    To create the stripped progress bar just add an extra class .progress-striped to the .progress base class.

                    <div class="progress progress-striped">
        <div class="progress-bar" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Stripped Progress Bar

    Similarly you can create the animated progress bar — just add the .active class to .progress-stripped. The .active class animates the stripes from right to left.

                    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    
                    

    Creating Stacked Progress Bar

    You can also place multiple bars into the same progress bar to stack them.

                    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 40%">
            <span class="sr-only">Program Files (40%)</span>
        </div>
        <div class="progress-bar progress-bar-warning" style="width: 25%">
            <span class="sr-only">Residual Files (25%)</span>
        </div>
        <div class="progress-bar progress-bar-danger" style="width: 15%">
            <span class="sr-only">Junk Files (15%)</span>
        </div>
    </div>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Stacked Progress Bar

    Progress Bars with Emphasis Classes

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

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

    — The output of the above example will look something like this:

    Bootstrap Progress Bar with Emphasis

    Striped Progress Bars with Emphasis Classes

    Similar to the solid colors, you can also create varied striped progress bars.

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

    — The output of the above example will look something like this:

    Bootstrap Striped Progress Bar with Emphasis
  • BOOTSTRAP HELPER CLASSES ↓

    Bootstrap provides a handful of CSS classes for common usages.

    Contextual Colors

    You can use the contextual color classes like .text-succes, .text-info, .text-warning etc. to emphasize the text. See the tutorial on Bootstrap typography for more detail.


    Contextual Backgrounds

    Similar to the contextual text color classes, you can use the contextual background color classes to set the background-color of an element to apply extra emphasis on them.

                    <p class="bg-primary">Important: 
    Please read the instructions carefully before proceeding.</p>
    <p class="bg-success">Success: 
    Your message has been sent successfully.</p>
    <p class="bg-info">Note: 
    You must agree with the terms and conditions to complete the sign up process.</p>
    <p class="bg-warning">Warning: 
    There was a problem with your network connection.</p>
    <p class="bg-danger">Error: 
    An error has been occurred while submitting your data.</p>
    
                    

    — The output of the above example will look something like this:

    Close Icon

    Bootstrap provides a generic close icon that can be used for dismissing modals and alerts.

                  <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Warning!</strong> 
    There was a problem with your network connection.
    </div>
    
                  

    — The output of the above example will look something like this:

    Bootstrap Close Icon Demo

    Caret Icon

    Bootstrap provides a generic caret icon to indicate the dropdown functionality. The direction of the caret icon will reverse automatically in dropup menus.

                  <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
    Services <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Design</a></li>
                <li><a href="#">Development</a></li>
            </ul>
        </li>
    </ul>
    
                  

    — The output of the above example will look something like this:

    Bootstrap Caret Icon Demo

    Center Alignment of Content Blocks

    You can use the Bootstrap class .center-block to align the content block horizontally center. However, to see the effect of this class you have to set the width of the content block yourself and it should be less than the containing parent element.

                  <div class="wrapper">
       <div class="center-block">Center Aligned DIV Box</div>
    </div>
    
                  

    See the tutorial on CSS alignment to learn more about aligning the elements.

    Quick Floats

    You can quickly float an element to the left or right using the .pull-left and .pull-right classes. These classes included the CSS !important declaration to avoid specificity issues.

                   <div class="pull-left">Floated to left.</div>
    <div class="pull-right">Floated to right.</div>
    
                   

    Clearfix

    The .clearfix class clears the float on any element. This class is widely used for fixing the collapsing parent issue, where parent element contains floated boxes.

                   <div class="wrapper clearfix">
       <div class="pull-left">Float to left</div>
       <div class="pull-right">Float to right</div>
    </div>
    
                   

    See the tutorial on CSS alignment to learn more about clearing floats on an element.

    Showing and Hiding Content

    You can force an element to be shown or hidden on all the devices using the .show and .hidden classes. These classes also included the CSS !important declaration to avoid specificity conflicts, just like the quick floats.

    Furthermore, you can use the class .invisible to toggle only the visibility of an element; however the element still occupies the space in the layout.

                    <div class="show">This is visible to the user.</div>
    <div class="hidden">This is not visible to the user.</div>
    <div class="invisible">This is not visible but affects the layout.</div>
    
                    

    Content Specific to Screen Readers

    The special .sr-only class hides an element to all devices except screen readers.

                    <p>This paragraph is visible to all devices.</p>
    <p class="sr-only">This paragraph is only
     visible to screen readers.</p>
    
                    

    Hide Text Only

    You can use the class .text-hide to hide the text content of an element.

                    <h1 class="text-hide">The text of this heading is not visible</h1>
    <p class="text-hide">The text of this paragraph is not visible.</p>
    
                    
  • BOOTSTRAP FORMS ↓

    In this tutorial you will learn how to create elegant forms with Bootstrap.

    Creating Forms with Bootstrap

    HTML forms are the integral part of the web pages and applications, but styling the form controls manually one by one with CSS are often boring and tedious. Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.

    Bootstrap provides three different types of form layouts:

    • Vertical Form (default form layout)
    • Horizontal Form
    • Inline Form

    The following section will give you the detailed overview of these form layouts as well as the various form related Bootstrap components one by one.

    Creating Vertical Form Layout

    This is the default Bootstrap form layout in which styles are applied to form controls without adding any base class to the <form> element or any large changes in the markup.

    The form controls in this layout are stacked with left-aligned labels on the top.

                   <form>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
    
                   

    — The output of the above example will look something like this:

    Bootstrap Vertical Form Layout

    Creating Horizontal Form Layout

    In horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. The horizontal form layout requires the various markup changes from a default form layout. Steps to achieve this layout are listed below:

    • Add the class .form-horizontal to the <form> element.
    • Wrap labels and form controls in a <div>element and apply the class .form-group.
    • Use Bootstrap's predefined grid classes to align labels and form controls.
    • Add the class .control-label to the <label> element.
                   <form class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">Password</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </div>
    </form>
    
                   

    — The output of the above example will look something like this:

    Bootstrap Horizontal Form Layout

    Creating Inline Form Layout

    Sometimes you might require to place the form controls side-by-side to compact the layout. You can do this easily by adding the Bootstrap class .form-inline to the <form> element.

                    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Inline Form Layout

    Static Form Control

    There might be a situation when you need to place just plain text next to a form label instead of a form control. You can do this within a horizontal form layout by using the
    .form-control-static class on a <p> element, like this:

                   <form class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-10">
                <p class="form-control-static">harrypotter@mail.com</p>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">Password</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </div>
    </form>
    
                   

    — The output of the above example will look something like this:

    Bootstrap Static Form Control

    Height Sizing of Inputs and Select Boxes

    You can easily control the height of your input and select boxes to match the button sizes. The Bootstrap's relative sizing classes like .input-lg, .input-sm can be used both on <input> and <select> boxes to create it's larger or smaller sizes.

                    <form>
        <div class="row">
            <div class="col-xs-6">
                <input type="text" class="form-control input-lg" placeholder="Large input">
            </div>
            <div class="col-xs-6">
                <select class="form-control input-lg">
                    <option>Large select</option>
                </select>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-6">
                <input type="text" class="form-control" placeholder="Default input">
            </div>
            <div class="col-xs-6">
                <select class="form-control">
                    <option>Default select</option>
                </select>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-6">
                <input type="text" class="form-control input-sm" placeholder="Small input">
            </div>
            <div class="col-xs-6">
                <select class="form-control input-sm">
                    <option>Small select</option>
                </select>
            </div>
        </div>
    </form>
    
                    

    Column Sizing of Inputs, Textareas and Select Boxes

    You can also match the sizes of your form controls to the Bootstrap grid column sizes. Just wrap your form controls (i.e. <input>, <textarea>, and <select>) in grid columns, or any custom element and apply the grid classes on it.

                    <form>
        <div class="row">
            <div class="col-xs-3">
                <input type="text" class="form-control">
            </div>
            <div class="col-xs-4">
                <input type="text" class="form-control">
            </div>
            <div class="col-xs-5">
                <input type="text" class="form-control">
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-3">
                <textarea class="form-control"></textarea>
            </div>
            <div class="col-xs-4">
                <textarea class="form-control"></textarea>
            </div>
            <div class="col-xs-5">
                <textarea class="form-control"></textarea>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-3">
                <select class="form-control">
                    <option>Select</option>
                </select>
            </div>
            <div class="col-xs-4">
                <select class="form-control">
                    <option>Select</option>
                </select>
            </div>
            <div class="col-xs-5">
                <select class="form-control">
                    <option>Select</option>
                </select>
            </div>
        </div>
    </form>
    
                    

    Extending Form Controls with Bootstrap

    Bootstrap includes some other useful form components to make your form more attractive.

    Creating Prepended and Appended Inputs

    You can add text and icons or buttons before or after any text-based input.

    To prepend or append text and icons to an input:

    • Wrap the text or icon within a <span> element having the class .input-group-addon and place it before or after the <input> element.
    • Wrap both the <span> and text-based <input> element within a <div> element and apply the class .input-group on it.
                    <form>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Amount">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" placeholder="US Dollar">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
        </div>
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Prepended and Appended Inputs

    Similarly, you can place checkbox or radio button within input group's addon instead of text.

                    <form>
        <div class="row">
            <div class="col-xs-6">
              <div class="input-group">
                <span class="input-group-addon">
                  <input type="checkbox">
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="col-xs-6">
              <div class="input-group">
                <span class="input-group-addon">
                  <input type="radio">
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Prepended and Appended Inputs

    You can also prepend or append buttons instead of text. Wrap buttons within the <span> element and apply the class .input-group-btn, instead of .input-group-addon.

                     <form>
        <div class="row">
            <div class="col-xs-5">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search…">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Go</button>
                    </span>
                </div>
            </div>
            <div class="col-xs-7">
                <div class="input-group">
                    <input type="text" class="form-control"  placeholder="Type something…">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Action</button>
                        <button type="button" class="btn btn-default">Options</button>
                    </span>
                </div>
            </div>
        </div>
    </form>
    
                     

    — The output of the above example will look something like this:

    Bootstrap Prepended and Appended Inputs

    Creating Button Dropdowns

    You can also create dropdown buttons if you want to do more than one action from a button.

                    <form>
        <div class="row">
            <div class="col-xs-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Button Dropdowns

    Creating Segmented Dropdown Button Groups

    Similarly, you can define the segmented dropdown button group where dropdown button is placed besides the other buttons.

                   <form>
        <div class="row">
            <div class="col-xs-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu"> 
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
                   
                   

    — The output of the above example will look something like this:

    Bootstrap Segmented Dropdown Button Groups

    Height Sizing of Form and Input Groups

    You can also add the relative form sizing classes such as .input-group-lg or .input-group-sm to the .input-group itself to make it larger or smaller.

    The contents within .input-group will automatically resize — there is no need for repeating the form control size classes on each element.

                    <form>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-lg">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu"> 
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu"> 
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu"> 
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
    
                    

    Similarly, you can use the class .form-group-lg or .form-group-sm to resize the labels and form controls within the horizontal form layouts at the same time.

                    <form class="form-horizontal">
        <div class="form-group form-group-lg">
            <label class="col-sm-3 control-label" for="inputLarge">Large label</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="inputLarge" placeholder="Large input">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="inputDefault">Default label</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="inputDefault" placeholder="Default input">
            </div>
        </div>
        <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label" for="inputSmall">Small label</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="inputSmall" placeholder="Small input">
            </div>
        </div>
    </form>
    
                    

    Creating Disabled and Readonly Inputs

    To create disabled inputs just add the attributes disabled to the <input>/code> element and Bootstrap will do the rest.

                    <form>
        <input type="text" class="form-control" placeholder="Disabled input" disabled="disabled">
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Disabled Inputs

    Similarly, you can add the readonly attribute on input elements to create read only input controls that prevent user inputs and give the style same as disabled.

                  <form>
        <input type="text" class="form-control" placeholder="Readonly input" readonly="readonly">
    </form>
    
                  

    Creating Disabled Fieldsets

    Rather than disabling the form controls individually, you can also disable all form controls within a fieldset at once by adding the disabled attribute to the <fieldset> element.

                    <form class="form-horizontal">
        <fieldset disabled="disabled">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-2">Email</label>
                <div class="col-xs-10">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
        </fieldset>
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Disabled Inputs

    Placing Help Text around Form Controls

    Placing help text for the form controls in an efficient way to guide users to enter the correct data in a form. You can place block level help text for the form controls using the class .help-block. The help text is typically displayed at the bottom of the control.

                   <form>
        <input type="text" class="form-control">
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </form>
    
                   

    — The output of the above example will look something like this:

    Bootstrap Block Help Text

    Bootstrap Form Validation States

    Bootstrap provides easy to use and powerful mechanism for styling input controls to present different validation states. Bootstrap includes validation styles for error, warning, and success messages. To use, just add the appropriate class to the surrounding .form-group.

                    <form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
            <div class="col-xs-10">
                <input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
                <span class="help-block">Username is available</span>
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-xs-2 control-label" for="inputWarning">Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">
                <span class="help-block">Password strength: Weak</span>
            </div>
        </div>
        <div class="form-group has-error">
            <label class="col-xs-2 control-label" for="inputError">Email</label>
            <div class="col-xs-10">
                <input type="email" id="inputError" class="form-control" placeholder="Input with error">
                <span class="help-block">Please enter a valid email address</span>
            </div>
        </div>
    </form>
    
                    

    — The output of the above example will look something like this:

    Bootstrap Form Validation States

    You can also add optional feedback icons to your inputs using the class .has-feedback on .form-group and the right glyphicon, like this:

                     <form class="form-horizontal">
        <div class="form-group has-success has-feedback">
            <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
            <div class="col-xs-10">
                <input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                <span class="help-block">Username is available</span>
            </div>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="col-xs-2 control-label" for="inputWarning">Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                <span class="help-block">Password strength: Weak</span>
            </div>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="col-xs-2 control-label" for="inputError">Email</label>
            <div class="col-xs-10">
                <input type="email" id="inputError" class="form-control" placeholder="Input with error">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                <span class="help-block">Please enter a valid email address</span>
            </div>
        </div>
    </form>
    
                     

    Supported Form Controls in Bootstrap

    Bootstrap includes support for all standard form controls as well as new HTML5 input types such as datetime, number, email, url, search, tel, color etc. The following example will show you the usages of standard form controls with Bootstrap.

                    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-xs-3" for="inputEmail">Email:</label>
            <div class="col-xs-9">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="inputPassword">Password:</label>
            <div class="col-xs-9">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="confirmPassword">Confirm Password:</label>
            <div class="col-xs-9">
                <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="firstName">First Name:</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="firstName" placeholder="First Name">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="lastName">Last Name:</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="lastName" placeholder="Last Name">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="phoneNumber">Phone:</label>
            <div class="col-xs-9">
                <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3">Date of Birth:</label>
            <div class="col-xs-3">
                <select class="form-control">
                    <option>Date</option>
                </select>
            </div>
            <div class="col-xs-3">
                <select class="form-control">
                    <option>Month</option>
                </select>
            </div>
            <div class="col-xs-3">
                <select class="form-control">
                    <option>Year</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="postalAddress">Address:</label>
            <div class="col-xs-9">
                <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3" for="ZipCode">Zip Code:</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-3">Gender:</label>
            <div class="col-xs-2">
                <label class="radio-inline">
                    <input type="radio" name="genderRadios" value="male"> Male
                </label>
            </div>
            <div class="col-xs-2">
                <label class="radio-inline">
                    <input type="radio" name="genderRadios" value="female"> Female
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-9">
                <label class="checkbox-inline">
                    <input type="checkbox" value="news"> Send me latest news and updates.
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-9">
                <label class="checkbox-inline">
                    <input type="checkbox" value="agree">  I agree to the <a href="#">Terms and Conditions</a>.
                </label>
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-9">
                <input type="submit" class="btn btn-primary" value="Submit">
                <input type="reset" class="btn btn-default" value="Reset">
            </div>
        </div>
    </form>
    
                    
Read more...