Using Dropdowns and Button Groups

Tutorial 2 of 5

1. Introduction

1.1. Brief Explanation of The Tutorial's Goal

In this tutorial, we will learn how to use Dropdowns and Button Groups, two of the most frequently used components in web design, in Bootstrap 4. We aim to understand these components' fundamental principles and how to customize them according to our needs.

1.2. What The User Will Learn

Understand how to use Dropdowns and Button Groups in Bootstrap 4.
Learn how to customize these components.
Implement examples in your projects.

1.3. Prerequisites

Basic knowledge of HTML, CSS, and JavaScript.
Basic understanding of Bootstrap 4 framework.

2. Step-by-Step Guide

2.1. Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.

<!-- Basic structure of a dropdown -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

2.2. Button Groups

Button groups are a series of buttons grouped together on a single line in your HTML code. They are often used for creating toolbars or segmented controls.

<!-- Basic structure of a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

3. Code Examples

3.1. Dropdowns

Here's an example of how to create a dropdown with dividers and a disabled menu item.

<!-- Dropdown with divider and disabled menu item -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <a class="dropdown-item disabled" href="#">Disabled link</a>
  </div>
</div>

3.2. Button Groups

Here's how to create a button group with button toolbar and input group.

<!-- Button group with toolbar and input group -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  </div>
</div>

4. Summary

We have covered the basics of creating Dropdowns and Button Groups in Bootstrap 4. You learned how to use these components and customize them to match your needs. You also learned how to use Button Groups to create toolbars and segmented controls.

Next steps for learning include exploring other Bootstrap components and understanding how to use them in your project. For more information, refer to the official Bootstrap documentation.

5. Practice Exercises

Create a dropdown menu with five items. Make the third item non-clickable.
Create a button group with four buttons. Make the second button a dropdown menu.

Solutions and tips will be provided in subsequent tutorials. Keep practicing and exploring different possibilities with these components. Happy coding!