Checkbox and radio buttons

A new feature in Bootstrap 4 is the ability to convert checkboxes and radio buttons into regular buttons. This is really handy from a mobile standpoint because it is much easier to touch a button than it is to check a box or tap a radio button. If you are building a mobile app or responsive website, it would be a good idea to use this component. Let's start by taking a look at the code to generate a group of three checkboxes as a button group:

<div class="btn-group" data-toggle="buttons"> 
  <label class="btn btn-primary active"> 
    <input type="checkbox" checked autocomplete="off"> checkbox 1 
  </label> 
  <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> checkbox 2 
  </label> 
  <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> checkbox 3 
  </label> 
</div>

Let me break down the code and explain what is going on here:

To generate a button group with checkboxes, you need to wrap the boxes in a <div> with a class of .btn-group.
To allow the buttons to toggle on and off, you also need to add the data attribute data-toggle="buttons" to the <div>.
Next we need to use the button classes on the <label> tag to convert each checkbox into a button. Note that on the first button I'm using the .active class, which will make this checkbox toggled on by default. This class is totally optional.
Your basic checkbox <input> tag is nested within the label.

Keep in mind since these are checkboxes, you can toggle multiple options on or off. Here's what the button group should look like when rendered in the browser:

As you can see, this renders a nice-looking button group that is optimized for mobile and desktop. Also, notice how the first checkbox has a different background color as it is currently toggled on because of the .active class applied to that label. In the same way that we've created a button group with checkboxes, we can do the same thing with radio buttons.

Creating a radio button group

Creating a radio button group is very similar to the checkboxes. Let's start by checking out the code to generate this different variation:

<div class="btn-group" data-toggle="buttons"> 
  <label class="btn btn-primary active"> 
    <input type="radio" name="options" id="option1" autocomplete="off" checked> radio 1 
  </label> 
  <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2" autocomplete="off"> radio 2 
  </label> 
  <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3" autocomplete="off"> radio 3 
  </label> 
</div>

Let me explain what's happening here with this code:

Like the checkboxes, you need to wrap your collection of radio buttons in a <div> with the same class and data attribute
The <label> tag and button classes also work the same way
The only difference is that we are swapping the checkbox <input> type for radio buttons

Keep in mind that with radio buttons, only one can be selected at a time. In this case, the first one is selected by default, but you could easily remove that. Here's what the buttons should look like in the browser:

As you can see, the button group is rendered the same way as the checkboxes, but in this case we are using radios. This should be the expected result to optimize your group of radio buttons for mobile and desktop. Next we'll build on what we've learned about button groups, but learn how to use them in other ways.

Note

We'll circle back later in this chapter and actually add the components to our blog project.

Using button groups

If you're new to Bootstrap, button groups are exactly as they sound. They are a group of buttons that are connected horizontally or vertically to look like a single component. Let's take a look at the code to render the most basic version of the component:

<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>

As you can see, we have a group of regular button tags surrounded by <div> with a class of .btn-group on it. At the very least, this is all you need to do to render a button group. There are a couple of other optional attributes on the <div> tag, which are role and aria-label. If you need to worry about accessibility, then you should include those attributes, otherwise they are optional. One other small change in this code is I've decided to use the .btn-secondary class to mix things up a bit with the button styles. Let's take a look at how this will appear in the browser:

As you can see, we have a single component that is made up of three buttons. This component is commonly used for a secondary navigation, or in a form like I explained in the previous section. If you'd like to display the buttons vertically, that is also possible with a small change.

Creating vertical button groups

If you'd like to arrange the buttons in your group vertically, that is actually quite easy to do. There is no need to change any of the code on the <button> tags, you just need to update the CSS class name on the wrapping <div> tag. Here's the code you need to change:

<div class="btn-group-vertical"> 
  ... 
</div>

If you make that alteration to your code, then the same button group will appear like this in the browser:

It would probably have made sense to change the left button label to the top and the right button label to the bottom. However, I left them as they are because I wanted to show you how you can simply shift the alignment of the group by changing one CSS class. That covers the basics of using the button groups component; in the next section, I'll show you how to create button drop-down menus.

Coding a button dropdown

The code to render a button as a dropdown is a little bit more complicated but still fairly easy to get up and running. You'll combine a button tag with <div> that has a nested collection of links inside it. Let's take a look at the code required to render a basic drop-down button:

<div class="btn-group"> 
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown 
  </button> 
  <div class="dropdown-menu"> 
    <a class="dropdown-item" href="#">Link</a> 
    <a class="dropdown-item" href="#">Link Two</a> 
    <a class="dropdown-item" href="#">Link Three</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Link Four</a> 
  </div> 
</div>

Okay, there are a few things going on here. Let's break them down one by one and explain how the dropdown works:

The entire component needs to be wrapped in a <div> with a class of .btn-group on it.
Next you insert a <button> tag with some button CSS classes on it. Like in the previous section, some of the other attributes are optional. However, it is a good idea to include this attribute: aria-expanded. This can either be set to false or true and controls whether the dropdown is open or closed on page load. In most cases, you will want to set this to false.
After the <button> tag, insert another <div> tag which will hold all the links that appear in the drop-down menu list. Make sure you give this <div> a class of .dropdown-menu.
Within the second <div> you insert a collection of <a> tags, one for each item in your list. Each <a> tag requires a class of .dropdown-item so that the proper CSS styling is applied.
You may also want to insert a divider in your drop-down list if you have a large amount of links. This is done by inserting a third <div> with a class of .dropdown-divider on it.

As I mentioned, this component is a little more complex, but in Bootstrap 4 they have actually simplified it a bit to make it easier to use. Let's take a look at what it should look like in the browser. In the following screenshot, I've showed what the expanded version of the dropdown will look like so you can see the button and the list of links:

As you can see, we have a drop-down button with a list of links nested within it. Keep in mind that if you want to use this component, it does require that you include jQuery and bootstrap.min.js in your template. There are some other variations of this component you can easily implement, such as the pop-up menu.

Creating a pop-up menu

In some cases, you might want to have your menu pop up above the button instead of below it. You can achieve this by adding one class on the wrapping <div> for the component. Check out the code here:

<div class="btn-group dropup"> 
  .. 
</div>

As you can see, I've added the class .dropup to the <div>. This will make the menu appear above the button, and it should look like this:

As you can see, the list appears above the button when it is expanded.

Creating different size drop-down buttons

By adding a single class to the <button> tag in the dropdown, you can make the trigger larger or smaller. Let's take a look at the code for the smaller and larger button variations:

<!-- large button //--> 
<div class="btn-group"> 
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Large button 
  </button> 
  <div class="dropdown-menu"> 
    ... 
  </div> 
</div> 
 
<!-- small button //--> 
<div class="btn-group"> 
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Small button 
  </button> 
  <div class="dropdown-menu"> 
    ... 
  </div> 
</div>

If you find the button tag in the first example, you'll see I've added a class of .btn-lg to it. This class will increase the button size to be larger than the default. Take a look at the second chunk of code, find the <button> tag again, and you'll see a class of .btn-sm on it. This works the same way except the button will now be smaller than the default. Let's see how these buttons will render in the browser.