- Introduction and Installation
- Grid System
- Buttons, Glyphicons, Tables
- Vertical Forms, Horizontal Forms, Inline Forms
- Progress Bar and Jumbotron
Dropdown Menu Using Bootstrap:
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 started 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 using Bootstrap:
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=”navbar-nav” 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”
Note: Be-careful during the use of nav-bar it will change it’s size depending on the screen size.
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.
- Bootstrap 4 | Dropdowns
- How to disable tabs in Bootstrap ?
- Responsive images in Bootstrap with Examples
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- Responsive Video or Slideshow Embeds in Bootstrap with Examples
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- Lex Program to print the total characters, white spaces, tabs in the given input file
- Why do you need a Responsive Website
- Difference between bootstrap.css and bootstrap-theme.css
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between Bootstrap 4 and Bootstrap 5
- Difference Between Bootstrap 3 and Bootstrap 4
- What's new in Bootstrap v4.3 ?
- Bootstrap 4 | Carousel
- Bootstrap 4 | Toast
- Bootstrap 4 | Collapse
- Bootstrap 4 | Flex
- Bootstrap 4 | Alerts
Improved By : Akanksha_Rai