Tutorial on Bootstrap 3 Drop downs

Bootstrap 3 dropdowns are mainly used in the navigation menu to make a dropdown menu, But sometimes it is used in button and div also for scripting. A bootstrap 3 dropdowns is a toggleable menu that allows you to choose a value from a togglable list.

Basic Dropdown

To make a basic dropdown add the class name .dropdown to a parent div and inside that create a button or anchor tag and add the class name .dropdown-toggle and data-toggle="dropdown" to it and then create a list with the class name .dropdown-menu and you have done a basic bootstrap 3 dropdown.

Example

Try it yourself


Dropdown Divider

To make dropdown divider use .divider class name to a li inside the ul with the class name .dropdown-menu it is used to separate element inside the dropdown menu with a horizontal border

Example

 

Try it yourself

  • Dropdown Header

    Like dropdown divider use class name .dropdown-header to add headers inside the dropdown menu.

    Example

     

    Try it yourself

  • Disable and Active items

    to make an item disable that is on hover a cross button will appear to use the class name .disabled and to make a Highlight item use class name .active to make a blue background item.

    Example

     

    Try it yourself

  • CSS
  • HTML
  • Dropdown Position

    You can make a dropdown position right by using the class name .dropdown-menu-right on the ul with the class name .dropdown-menu and it will open on the right side of the page.

    Example

     

    Try it yourself

    Dropdown role and area

    To improve accessibility using screen readers, you can include the role and aria-* in a dropdown menu.

    Example

     

    Try it yourself

    
    

    In this post we have learned how to make Bootstrap 3 Dropdowns and Dropup, I hope the post helped you, please leave a comment to make the site more useful and better.

    Thanks for reading

    Share The Post On -

    Ads Blocker Image Powered by Code Help Pro

    Ads Blocker Detected!!!

    We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.