Hello Ninja! Let us learn about an interesting component of Bootstrap. This article will discuss the Bootstrap button dropdowns. As the name suggests, a button dropdown is a UI component in the Bootstrap framework that combines a button and a dropdown menu. You can use it to provide a user-friendly and visually appealing way to present a list of options to the user.
Are you interested in learning more about it? Then follow along.
Bootstrap Button Dropdowns
A Bootstrap button dropdown is a UI component in the Bootstrap framework that combines a button and a dropdown menu. The button can trigger the dropdown menu's display, which contains a list of options from which the user can select. The dropdown menu is usually displayed as a list of links or buttons. The Bootstrap button dropdown is created using HTML, CSS, and JavaScript, and it is designed to be responsive and easily customizable using Bootstrap's pre-made styles and classes.
Use of Bootstrap Button Dropdowns
The Bootstrap button dropdown provides a user-friendly and visually appealing way to present a list of options to the user. It allows the user to select one option from a list of options that are displayed as a dropdown menu. The button dropdown can be used in various situations, such as:
A navigation menu, where the button opens a dropdown menu with links to different pages or sections of a website.
A form element, where the button opens a dropdown menu with a list of options that the user can select to fill in a form field.
A context menu, where the button opens a dropdown menu with options relevant to a specific context, such as options for a selected item in a list.
The Bootstrap button dropdown provides a compact and visually appealing way to present options, and it helps to save screen space compared to displaying all options as a separate button or link. It also provides an intuitive user interface, as users are familiar with the concept of dropdown menus.
How to use Bootstrap Button Dropdown
Here's how you can use a Bootstrap button dropdown:
Include the Bootstrap Javascript and CSS files in your HTML file.
Create a button with a dropdown toggle using the dropdown class and add a button inside it using the ".btn" class.
Add dropdown items by adding <a> elements inside the dropdown menu div.
That's it! Your Bootstrap button dropdown should be functional now.
Let's now learn about the types of button dropdowns you can create using bootstrap.
Types of Bootstrap Button Dropdowns
There are two types of Bootstrap button dropdowns:
Single Button Dropdowns
It is a single button, and pressing it causes a dropdown menu of choices to appear. Single button dropdowns in Bootstrap are created using the <button> or <a> element with the class .btn and .dropdown-toggle. The dropdown menu is created using an <div> element with the class .dropdown-menu. You can add the dropdown to all the different types of button variants available.
Here's an example of a single-button dropdown in Bootstrap:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex align-items-center justify-content-center h-100">
<h2> Coding Ninjas </h2>
</div>
<div class="d-flex align-items-center justify-content-center h-100">
<p>Example of a <b>Single dropdown button</b>
</p>
</div>
<div class="dropdown">
<div class="d-flex align-items-center justify-content-center h-100">
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Click here! </button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#"> option one </a>
</li>
<li>
<a class="dropdown-item" href="#"> option two </a>
</li>
<li>
<a class="dropdown-item" href="#"> option three </a>
</li>
<!-- You can also add a divider between the list of items. -->
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#"> option four </a>
</li>
</ul>
</div>
</div>
</body>
</html>
Code Explanation
This code is an example of a single dropdown button. The dropdown button can be clicked to display a list of options. Each option is a clickable link represented by an anchor tag. The dropdown is built using the ".dropdown" class, the button is created using a button tag with the ".btn" and ".dropdown-toggle" classes, and the list of options is an unordered list with the ".dropdown-menu" class. The CSS classes "d-flex", "align-items-center" and "justify-content-center" are used to center the content horizontally and vertically within the parent element.
Output
Before clicking on the button:
After clicking on the button:
Split Button Dropdowns
It is a button with a dropdown menu and an additional button that can be used to perform an action. Split buttons are a feature in Bootstrap that allows you to create a dropdown button with a main button and a dropdown toggle. This allows the user to take action directly from the main button or access additional options from the dropdown toggle.
Here's an example of a split button dropdown in Bootstrap:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex align-items-center justify-content-center h-100">
<h2> Coding Ninjas </h2>
</div>
<div class="d-flex align-items-center justify-content-center h-100">
<p>Example of a <b>Split dropdown button</b>
</p>
</div>
<div class="d-flex align-items-center justify-content-center h-100">
<div class="btn-group">
<button type="button" class="btn btn-dark">I am a split button!</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">option one</a>
</li>
<li>
<a class="dropdown-item" href="#">option two</a>
</li>
<li>
<a class="dropdown-item" href="#">opiton three</a>
</li>
<!-- You can also add a divider to separate the list items. -->
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#">option four</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Code Explanation
This HTMLfile creates a simple webpage with a split dropdown button using Bootstrap. It contains a button group created with the ".btn-group" class. This group contains the split dropdown button.
The button group contains 3 elements:
A button with class "btn btn-dark". This class is used to create a main button of black colour.
A button with class ".btn btn-warning dropdown-toggle dropdown-toggle-split". This button serves as the toggle for the dropdown menu. It has the "data-bs-toggle" attribute set to "dropdown" to activate the dropdown.
An unordered list with the class ".dropdown-menu". It contains the options for the dropdown.
Output
Before clicking on the button:
After clicking on the split button:
Button Dropdowns Sizing
In Bootstrap, the button dropdown and split button dropdown components can be resized using the “.btn-lg”, and “.btn-sm” classes.
The .btn-lg class increases the button's size, making it larger than the default size. It is useful when you want to make a button stand out and be more noticeable.
The .btn-sm class decreases the button's size, making it smaller than the default size. It is useful when you want to conserve space on the page or create a less prominent button.
The .btn class generates a button of the default size.
To use these classes in a button dropdown, simply add the appropriate class to the dropdown toggle button.
The following example demonstrates bootstrap button dropdowns of different sizes.
This HTML code demonstrates button dropdowns and split button dropdowns of different sizes. There are three different examples, each showing buttons of different sizes (large, default, and small).
Each dropdown menu is created using a ".btn-group" div element, which serves as a container for the button and the dropdown menu. The buttons are created using a button element with the class ".btn" and one of the size classes ".btn-lg", ".btn-sm", or no size class for default size. To create a split dropdown, two buttons are used, with one designated as the trigger for the dropdown with the ".dropdown-toggle" and ".dropdown-toggle-split" classes. The dropdown menu itself is created using an unordered list element with the class ".dropdown-menu". Each item in the dropdown is created using a list item element with an anchor element inside, which is styled with the ".dropdown-item" class.
Output
Dropdown Directions and Alignments
You can change the directions and alignment of the button dropdown menu. The following example demonstrates various directions and alignments of bootstrap button dropdowns. These can also be applied to split button dropdowns.
This HTML code demonstrates the different directions and alignments of the dropdown menu that you can use with buttons in Bootstrap. This example in this code has the following components.
A list of examples of button dropdown alignments:
The first example uses the "btn-group" class and the ".dropdown-menu-lg-end" class to create a button with a right-aligned dropdown menu. When clicked, it displays a list of three menu items aligned to the right.
The second example is similar to the first, but the dropdown menu is left-aligned, created with the ".dropdown-menu-end dropdown-menu-lg-start" class.
A list of examples of button dropdown directions:
Button 3 uses the ".btn-group" and ".dropdown-toggle" classes to create a button with a dropdown menu that opens downwards.
Button 4 is similar to the third one, but the dropdown menu opens at the end of the button, created with the ".btn-group dropend" class.
In button 5, the dropdown menu opens at the start of the button, created with the ".btn-group dropstart" class.
In button 6, the dropdown menu opens in the upward direction, created with the ".btn-group dropup" class.
Output
Before clicking on any button:
On clicking button 1:
On clicking button 2:
On clicking button 3:
On clicking button 4:
On clicking button 5:
On clicking button 6:
Dropdown Menu Contents
Several menu contents can be used in a dropdown menu in Bootstrap. These are as follows:
Links: You can create a link-based menu item by using an anchor “a” element with the class dropdown-item.
Headers: You can create a header in the dropdown menu using an “<h6>” element with a class “dropdown-header”.
Divider: You can create a divider in the dropdown menu using an “<hr>” element with the class “dropdown-divider”.
Form: You can create a form in the dropdown menu using an <form> element within the class “dropdown-menu”.
Here's an example of a dropdown menu with different types of menu contents.
This HTML code includes four buttons, each with a different type of content in the dropdown menu: header, divider, text, and form.
The first button has a header in the dropdown menu with the text "Dropdown header".
The second button has options separated by a divider.
The third button has simple text inside the dropdown menu.
The fourth button has a form for login with inputs for username and password, as well as links for new users to sign up and for forgotten passwords.
The dropdown functionality is added through the "data-bs-toggle" attribute. The "btn-group" class is used to group the buttons, and the "dropdown-menu" class creates the dropdown content.
Output
Before clicking on any button:
On clicking button 1:
On clicking button 2:
On clicking button 3:
On clicking button 4:
Customizing Bootstrap Button Dropdowns
Bootstrap's button dropdowns can be customized in several ways:
CSS: You can use CSS to change the appearance of the dropdown button and its items. You can also use CSS to add custom styles to the dropdown, such as colour, font size, padding, etc.
JavaScript: Bootstrap's JavaScript plugin provides options for customizing the behaviour of the dropdown. For example, you can set the dropdown to close automatically when an item is clicked or to allow multiple items to be selected.
HTML: You can use HTML to modify the structure and content of the dropdown. For example, you can add custom items to the dropdown, or you can use different HTML elements to create the dropdown button and its items.
Let us now address some of the frequently asked questions.
Bootstrap is a free and open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS and JavaScript-based interface components and design templates like forms, buttons, navbars, and many more.
What are the benefits of using Bootstrap?
Bootstrap provides many pre-styled components like buttons, forms, etc. It is used to create responsive designs without any effort. The pages made using Bootstrap components are faster and have more functionality.
What are bootstrap button dropdowns?
A button dropdown is a UI component in the Bootstrap framework that combines a button and a dropdown menu.
What classes are needed to make the Dropright, Dropleft, Dropup, and Dropdown with Right menus?
The .dropright class, .dropleft class, .dropup class, and .dropdown-menu-right classes are used to construct a Dropright, Dropleft, Dropup, and a dropdown with the right menu, respectively.
What is the key difference between Bootstrap and CSS?
The key difference between Bootstrap and CSS is that Bootstrap is a front-end framework, while CSS is a style sheet language.
Conclusion
In this article, we learned about the bootstrap button dropdowns. We discussed the sizing of buttons and directions of dropdowns. We also talked about different types of menu contents that we can use with bootstrap button dropdowns. Finally, we learned how to use them in our projects with the help of examples.
To learn more about Bootstrap, you can refer to the following articles.
306+ registered