Bootstrap Navigation Bar : Bootstrap Navigation header is the top of header contating the navigation link of the site. You can place the navigation bar anywhere in header, footer or content area as per your need. This navigation menu provides the default responsive navigation means on mobile device they collapse and displays the icon to expand and show the menu items. By default on desktop or regular screen this navigation is horizontal. It becomes vertical on mobile devices.

Bootstrap Navigation Bar

There are following types of navigation available in bootstrap:

Default Navigation

For Adding Default navigation .navbar-default class is used.”

Here is an example of very basic default navigation menu.

Home

Account



Settings 



Profile



Home

Settingss

The above code will produce the following result-

Bootstrap Inverted Navigation

Inverted navigation provides you the inverse style than the default style in bootstrap. Class .navbar-inverse is used to create the inverse navigation menu.

Here is very basic and simple example of inverted navigation bar.

The Above code will produce the following output-

Bootstap Navbar COllapse

You Can create a navbar which will collapse on smaller resolution such as mobile device, tablet devices.

Add the following code to make navigation collapse on mobile devices.

It will produce the following output –

Bootstrap Navbar fixed : Top

You can create fixed navigation menu placed at top of the page. This navigation is always fixed at the top of the page though you scroll down page.

For top fixed navigation menu add the following css .navbar-fixed-top

Bootstrap Navbar fixed : Bottom

You can create fixed navigation menu placed at bottom of the page. This navigation is always fixed at the bottom of the page though you scroll down page.

For top fixed navigation menu add the following css .navbar-fixed-bottom

Colored Navigation

If You want to create the colored navigation Add Css to modify the background colored.

Bootstrap Colored Navigation >

Bootstrap Forms : Bootstrap provides three types of forms -vertical, horizontal and inline. Based on your requirement you can easily create these forms. Generally creating a form in html and styling them using css is a boring task. Bootstrap forms comes with the rich form elements and well organised layout. You need only add classes to make them beautiful. Thus bootstrap has simplified our task by providing well defined classes for creating form. Here in this tutorial we are going to explain how you can create Forms in Bootstrap. You can also use our online
editor to edit and run the code online.

Bootstrap Forms Example

Bootstrap provides basically three types of forms as below :

1. Vertical Form
2. Horizontal Form
3. Inline Form

Now let us go one by one to understand the bootstrap forms-

Bootstrap Vertical Form

By Default bootstrap creates vertical form, this comes with the bootstrap’s default setting. For Creating bootstrap you need to add following css and role in form elements.

1 – Add Role : First Add Role(form) in Form tag –

2 – Add Form Group Wrapper –

3 – Add Form Input Element – Add .form-control class in form input fields.

           

              

                First Name
                 
              
           
         

Note : By default bootstrap provides 100 % width of input fields

    

        First Name
        
    
    

        Email
        
    
    

        Phone
        
    
    

        Password
        
    
    

        Confirm Password
        
    
    Submit

Bootstrap Tutorial

Bootstrap provides rich grid-based responsive layout system. Bootstrap is powerful framework to develop responsive mobile-first website, It is one of the most loved framework for developing the mobile-first websites.

This tutorial is designed for the professionals to help them in learning the basic concept of Bootstrap. In this tutorial we will cover the basic and powerful features which can help the professionals to create fast, beautiful and mobile-first web applications using Bootstrap.

Bootstrap is free to use, you can use it free of cost.

Top 5 Reasons to Use Bootstrap

Bootstrap have become one of the most popular framework in Last few years. The Bootstrap framework is rich framework and have several benefits to use it. Here are top 5 reasons to use bootstrap framework.

• Rapid Development– If you are looking rapid development then bootstrap can be one of the best option, it provides the rich inbuilt readymade blocks which can be used easily without needing any extra effort.
• Responsive– Bootstrap uses media query which scales the websites on each devices from smart phone to desktop easily, you don’t need to write any extra code for other devices.
• Easy to Learn & Implement– It is very easy to learn & implement if you have basic knowledge of HTML, Css & jQuery you can learn and implement it easily.
• Customizable– Bootstrap is customizable you can override the default layout by overriding the classes.
• Support– Bootstrap Has great community support & it is growing day by day.