Bootstrap (Part-5) | DropDowns and Responsive Tabs

1. Introduction and Installation
2. Grid System
3. Buttons, Glyphicons, Tables
4. Vertical Forms, Horizontal Forms, Inline Forms
5. Progress Bar and Jumbotron

Dropdowns

In bootstrap, dropdowns are created using the class=”dropdown”. What we will do is create a button and then convert the button into a dropdown.
As already stated in the last few tutorials, buttons can be created using the <button> tag. But in this button, we want to create a dropdown, so we will add the class=”btn dropdown-toggle” and data-toggle=”dropdown”.

Basically, it would look something like this.

<button class=”btn btn-default dropdown-toggle” type=”button” data-toggle=”dropdown”> My Dropdown </button>

Now we want to convert this button into a dropdown. So, we’ll create an unordered list using the <ul> tag having class=”dropdown-menu” and add items using the <li> tag .

You can make your dropdown better by using classes in the <li> tag. To add a header in a dropdown add class=”dropdown-header”, to add a divider between items, use class=”divider” and to disble an item in the list, use class=”disabled”.

Navigation Tabs

To create a tabbed navigation menu, we need to make an unordered list using <ul> tag and then add class=”nav nav-tabs” . Now we can add our tabs using the <li> tag. Remember assigning one tab with class=”active” to view it as the default active tab. Now, we need to write the write the content of each tab using the class=”tab-pane” within the class=” tab-content”. Note that you  must assign id’s to the respective tab-pane.
Adding the class=”fade” adds a fading effect when the tabs are switched.

You can change the look and feel of the tabs by changing the class=”nav-tabs” to “nav-pills” or “nav-stacked” and if you want your tabs to cover the whole screen then, try adding the class=”nav-justified”
Similar to Dropdowns, we can disable any tab using class=”disabled”

 

For example, using <ul class=”nav nav-pills nav-justified”> and
<li class=”disabled”> <a href=”#Gblog” data-toggle=”tab”>G-blog </a> </li>
<!–Gblog Tab is Disabled–>
changes the look to :

Article By Harshit Gupta:
Kolkata based Harshit Gupta is an active blogger having keen interest in writing about current affairs, technical Blogs, stories, and personal life experiences. Besides passionate about writing, he also loves coding and dancing. Currently studying at IIEST, he is an active blog contributor at geeksforgeeks.

If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.