Hour 11.

Styling and Using Buttons and Button

Groups

What You’ll Learn in This Hour:

How to style buttons in Bootstrap

How to resize and color buttons

How to create a button group

How to style button groups with color, size, and display

When you’re creating interactive websites, you need a tool that indicates
to the customer that clicks will cause an action. Buttons are an easily rec-
ognized interface, and Bootstrap makes it simple to add them to your web
pages.

This hour you learn how to create basic buttons with Bootstrap and ad-
just how they look on the page. You also learn how to create groups of
buttons and even dropdown menus with your buttons.

Basic Buttons

Buttons in Bootstrap look exactly like you expect. Figure 11.1 shows what
a basic button looks like.

FIGURE 11.1 A standard Bootstrap button.

Bootstrap buttons are very plain by default. They have slightly rounded
corners, a white background, and a thin gray border. When you mouse
over them, they turn light gray, and when they are actively clicked,
Bootstrap adds an inset gray shadow on the button.

Button Tags

To add a button to your page, you first add the class .btn and then the
.btn-default class to create a default button. You can create buttons on
three HTML tags:

<button>

<a>

<input>

The <input> tag can be either a type="button" or type="submit" . Add

the classes to these HTML elements, as in Listing 11.1.

LISTING 11.1 Four Button Tags

Click here to view code image

<a class="btn btn-default">Link</a>

<button class="btn btn-default" type="submit">Button</button>
<input type="button" class="btn btn-default" value="Input">
<input type="submit" class="btn btn-default" value="Submit">

As shown in Figure 11.2, these tags create buttons that look the same. So
you can use the HTML tags that work best on your site.
 FIGURE 11.2 Four Bootstrap buttons using different HTML tags.

NOTE: BUTTON BEST PRACTICES

With Bootstrap, you can create buttons using any of the four
listed tags, but there are some best practices you should fol-
low if you can. You can use the button classes only on
<button> elements in the navigation (see Hour 12,
“Creating Navigation Systems with Bootstrap”). If you cre-
ate a link as a button, you should indicate the role with the
role="button" attribute. Also, for the widest possible future
support, you should always use the <button> element as
your first choice for buttons.

Button Classes and Sizes

Like with other Bootstrap elements, you can change the color and size of
your buttons with different secondary classes. Seven classes are
available:

btn-default —The standard button

btn-primary —The primary action in a set of buttons

btn-success —Indicates a successful or positive action

btn-info —Contextual button for informational alert buttons

btn-warning —Indicates that caution should be taken with this action

btn-danger —Indicates a dangerous or negative action

btn-link —Makes the button look like a link while still behaving like a
button

CAUTION: CONVEY MEANING IN OTHER WAYS

When you use the contextual classes to convey meaning, you

risk that some of your customers won’t access that meaning
because they don’t see color or they use audio browsers. Be
sure that the content is presented in some other way, beyond
the color of the button, to make it accessible. One way is to
use the .sr-only class to hide content from non-screen
readers.

Listing 11.2 shows you how to add these button types to your HTML, and
Figure 11.3 shows how they would look.

LISTING 11.2 Seven Button Types in Bootstrap

Click here to view code image

<button class="btn btn-default">Default</button>

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>

FIGURE 11.3 Seven button types in Bootstrap.

There are four sizes of buttons in Bootstrap. The default is a medium size
button, but you can also use classes to create a large, small, or extra small
button:

.btn-lg

.btn-sm

.btn-xs

You can combine the size classes with the contextual classes to create a
large warning button or an extra small primary one. You also can create
buttons that span the full width of the parent element with the .btn-
block class. Figure 11.4 shows how these size classes affect the way the
buttons look. You can see the HTML for it in Listing 11.3.

FIGURE 11.4 Change the button sizes.

LISTING 11.3 Change the Button Sizes

Click here to view code image

<div class="container">
  <button class="btn btn-default btn-lg">Large Button</button>
  <button class="btn btn-primary">Medium Button</button>
  <button class="btn btn-success btn-sm">Small Button</button>
  <button class="btn btn-warning btn-xs">Extra Small
  Button</button>
  <button class="btn btn-danger btn-block">Full Width
  Button</button>
   <div class="row">
    <div class="col-md-6">
        <button class="btn btn-info btn-block">Half Width
        Button</button>
    </div>
  </div>
</div>

The easiest way to change the size of a block button is to put it inside a
column element on your grid. In Listing 11.3, I placed the button in an el-
ement six columns wide so it would span half the width of the screen.

Button States

Buttons have states, just like links. They can be active so they appear
pressed or disabled so they can’t be clicked on. Bootstrap adds some addi-
tional styles to these states so that the buttons appear more interactive.

Active buttons will appear pressed by getting a darker background, a

darker border, and an inset shadow when they are clicked on. Figure
11.5 shows buttons in an active state.

FIGURE 11.5 Active Bootstrap buttons.

Disabled buttons are not clickable, and they are given styles to fade them
into the background of the page. You can make any button disabled with
the disabled attribute. For example:

Click here to view code image

<button class="btn btn-default" disabled>Disabled Button</button>

Figure 11.6 shows how Bootstrap displays disabled buttons.

FIGURE 11.6 Disabled Bootstrap buttons.

CAUTION: DON’T USE THE DISABLED ATTRIBUTE WITH <A> TAGS

The disabled attribute is not a valid attribute of the <a>

tag and can cause problems if you use it there. Most modern
browsers will display a disabled button written with an an-
chor ( <a> ) tag correctly, but it may still be clickable, which
defeats the purpose. Instead, use the .disabled class on the
tag and disable it that way.

You use the classes .active and .disabled to force these styles on but-
tons that might otherwise display differently. Be aware that buttons cre-
ated with an anchor ( <a> ) tag might behave slightly differently when set
to .active or .disabled . Be sure to test in your devices if you are using
that tag for your buttons.
 NOTE: WHY DISABLE BUTTONS?

It can seem odd to have the ability to disable buttons on web

pages. After all, wouldn’t that frustrate customers if they
can’t click on a button? But disabling elements on your web
pages can make the forms more usable. For instance, if the
form has a large number of required fields, you can set the
submit button to be disabled until all the required fields are
filled in. This helps customers get the form submitted accu-
rately on the first try. You also might disable a button on a
“Terms and Conditions” field, so that the “Next” button is not
active until the reader has scrolled through the entire terms.
You should think of the disabled attribute as a way to make
forms easier to fill in and avoid using it just to annoy your
customers.

Button Groups

You can group buttons together on a line as a group. This connects the
buttons together and makes them a more cohesive whole. You can create
horizontal, vertical, and toolbar button groups.

To create a button group, you surround your buttons with a container ele-
ment such as <div> with the class .btn-group . Then be sure to include
the appropriate role attribute: toolbar for toolbars and group for but-
ton groups. This will ensure that screen readers know that the buttons
are grouped together. Finally, to be fully accessible, you should include a
label for the screen readers to read, such as with the aria-label attri-
bute or by including text in the buttons and hiding it with the .sr-only
class. Listing 11.4 shows the HTML for a simple button group.

LISTING 11.4 A Simple Button Group

Click here to view code image

 <div class="btn-group" role="group" aria-label="Button Group">
  <button type="button" class="btn btn-default">Fast</button>
  <button type="button" class="btn btn-default">Slow</button>
  <button type="button" class="btn btn-default">Stop</button>
</div>

Horizontal Button Groups

Horizontal button groups are the default layout for button groups.

Just like with standalone buttons, you can resize your button groups with
three classes:

.btn-group-lg

.btn-group-sm

.btn-group-xs

These make the button groups larger and smaller, as in Figure 11.7.

FIGURE 11.7 Different size button groups.

Another class you can use on button groups is the .btn-group-justi‐

fied class. This will stretch the buttons in the group to span the entire
width of the container.

If you’re using <a> tags for your buttons, just add the class to the button
group container, as in Listing 11.5. Figure 11.8 shows what it will look
like.
LISTING 11.5 Justified Button Group

Click here to view code image

<div class="btn-group btn-group-justified" role="group"

     aria-label="Button Group">
  <a href="#" class="btn btn-default">Fast</a>
  <a href="#" class="btn btn-default">Slow</a>
  <a href="#" class="btn btn-default">Stop</a>
</div>

FIGURE 11.8 A justified button group.

It’s a little trickier with <button> tags. Most browsers don’t properly ap-
ply the Bootstrap CSS for justification correctly. So, to get it to work, you
should surround each button with another .btn-group element, as in
Listing 11.6.

LISTING 11.6 Justified Button Group with <button> Elements

Click here to view code image

<div class="btn-group btn-group-justified" role="group"

     aria-label="Button Group">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Fast</button>
  </div>
  <div class="btn-group">
     <button type="button" class="btn btn-default">Slow</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Stop</button>
  </div>
</div>

Vertical Button Groups

If you want your button group to be stacked vertically, use the class
.btn-group-vertical . By adding this class to the HTML in Listing 11.4,
you will get a button group like in Figure 11.9.

FIGURE 11.9 A vertical button group.

Button Toolbars

You make toolbars by combining multiple button groups. This gives you
the ability to style more complex elements. Listing 11.7 shows how you
might write the HTML for a button toolbar with three button groups.
Figure 11.10 shows what it would look like in the default Bootstrap styles
with a couple of fancier buttons.

LISTING 11.7 A Button Toolbar

Click here to view code image

<div class="btn-toolbar">
  <div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-primary">1</button>
     <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-default">4</button>
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-default">8</button>
    <button type="button" class="btn btn-default">9</button>
    <button type="button" class="btn btn-danger">10</button>
  </div>
</div>

FIGURE 11.10 A button toolbar.

As you can see from Figure 11.10, you can always adjust the buttons to
use the different button types.

Button JavaScript

Bootstrap includes a script to let you do more with your buttons:

button.js . You can use this script to control the state of your buttons,
toggle the buttons on and off, and change your checkbox and radio input
fields into buttons. You will learn how to use these in Hour 18,
“Transitions, Buttons, Alerts, and Progress Bars.”
Summary

This hour covered how to use buttons and button groups in Bootstrap.
Bootstrap provides classes to convert your <button> , <a> , and <input>
tags into buttons that respond to customer interaction. You also learned
how to combine multiple buttons into groups and toolbars.

You learned about the classes that create buttons and button groups and
change the size and color of those buttons and groups. You also learned
the classes to convert the button groups to vertical button groups and
toolbars. Table 11.1 shows the classes covered in this hour.

TABLE 11.1 Bootstrap Classes for Buttons and Button Groups

 Workshop

The workshop contains quiz questions to help you process what you’ve
learned in this hour. Try to answer all the questions before you read the
answers.

Q&A

Q. How do I make the buttons do something?

A. Bootstrap is a framework for providing the look and feel of a website and
a little interactivity. When you click on a button on a Bootstrap site, you
need to have some type of script (either JavaScript, PHP, or something
else) that does something. Hour 18 covers the basic actions that Bootstrap
provides, but if you want it to do more, you should read a book like Sams
Teach Yourself jQuery and JavaScript in 24 Hours by Brad Dayley or Sams
Teach Yourself PHP, MySQL, and Apache All in One by Julie Meloni.

Q. I prefer to use the <a> tag for my buttons; does this really matter?

A. You can use the <a> , <button> , or <input> tags for buttons. Firefox
versions below 30 have a rendering bug that might make your <input>
buttons a slightly different height from other buttons. And other
browsers might have similar differences. It’s better to pick one HTML ele-
ment and use that consistently for your buttons. Bootstrap recommends
<button> , but you can use any of them.

Q. Can I turn checkboxes and radio buttons into buttons?

A. To make a checkbox or radio input button into a Bootstrap button, you

need to do a few things. You need to use the button.js script, add data-
toggle="buttons" to the button group container, and then add the .btn
and .btn- type classes to the <label> around the input field. All this is
covered in detail in Hour 18.

Quiz

1. Which of the following is a valid tag for creating a button?

a. <a>

b. <button>

c. <input>

d. All of the above

2. Which of the following is the best tag to use for creating buttons?

a. <a>

b. <button>

c. <input>

d. All of the above

3. Which class is required to create a Bootstrap button?

a. .btn

b. .btn-default

c. .btn-link

d. .button

4. What does the .btn-link class do?

a. It turns a link tag ( <a> ) into a button.

b. It creates a link that looks like a button but acts like a link.

c. It creates a button that looks like a link.

d. It is not a valid Bootstrap class.

5. Which of the following is not a secondary class for buttons?

a. .btn-correct

b. .btn-default

c. .btn-primary

d. .btn-success

6. Which of these classes will resize a button?

a. .btn-lg

b. .btn-md

c. .btn-small

d. All of the above

7. How do you disable a <button> element?

a. Add the .disabled class.

b. Add the disabled attribute.

c. Add both the .disabled class and the disabled attribute.

d. You cannot disable a <button> element.

8. When should you use the state classes .active and .disabled ?

a. Use them whenever the state changes on your buttons.

b. Use them when you need the state to be explicitly displayed.

c. Use them only on <a> tag buttons.

d. Use them whenever you want to.

9. What is the class (or classes) to define a button group?

 a. .btn and .group

b. .btngroup

c. .btn-group

d. .group

10. How do you ensure a button group is accessible?

a. Use the .btn-group or .btn-toolbar classes to make it accessible.

b. Add the <role> tag to the button group.

c. Use an ARIA label.

d. Use the role attribute to define it as a toolbar or a group .

Quiz Answers

1. d. All of the above.

2. b. <button> is the recommended best practice.

3. a. .btn must be on all buttons.

4. c. It creates a button that looks like a link.

5. a. The .btn-correct class is not a Bootstrap button secondary class.

6. a. .btn-lg will make the buttons larger than the default.

7. b. Add the disabled attribute.

8. b. You should use the state classes when you want the state to be explic-
itly displayed.

9. c. .btn-group
10. d. Use the role attribute to define it as a toolbar or a group .

Exercises

1. Open your Bootstrap page and add a button to the page.

2. Create a group of buttons in a button group.