Day 6: Bootstrap 4 Buttons Tutorial and Examples

Day 5: Bootstrap 4 Images
Day 7: Bootstrap 4 Inputs

Hey welcome to a new week of Bootstrap 4 🎉 Today we will learn about Bootstrap 4 buttons, how to use and customise them. Each section will have coded examples and explanations. As a bonus, today you will also navigate through the spacing utilities: how to use Bootstrap 4 classes for margins and padding.

This article will be divided into the following parts:

Bootstrap 4 Buttons
Bootstrap 4 Button States
- Active State
- Disabled State
Bootstrap 4 Button Groups and Toolbars
Further Reading

Let’s star pushing some buttons!

Photo credit to Emily Mills for her shot.

Buttons

Bootstrap 4 offers multiple classes for buttons so you can easily style and size them. We will take each editable feature one by one. When you will create your button you will need to use multiple classes on a single button tag. This means you will need a class for colour and another one for sizing.

Setting Colours

There are 10 options for setting the colour to your Bootstrap 4 buttons. Like we mentioned in the 4th day of Bootstrap 4, the colouring classes are contextual. To use them you need to specify the context for the button with the .btn-[context] class. The context options are the same for all elements: primary, secondary, success, danger, warning, info, light, dark(instead of blue, grey, green, red, orange, azzure, white and black).

Here is how the different variations for buttons look:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Using the `.btn` Class

The .btnclass is intended primarily for the <button> tag. But you can also use it on links (<a> tags) and inputs (<input> tags) and it will create the same styled buttons as in the base of the <button> tag. Here is an example showing the all have the same style:

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

When using a link to trigger an action online, you should add the role=”button” attribute. This way assistive technologies such as screen readers display them as buttons.

Setting Styles

There are 3 styles between which you can choose: filled buttons (using the classes described above for colour), outline buttons using .btn-outline-[context] classes and links. The outline buttons come in the same colour variations as the filled ones, whereas the .btn-link has only the blue styling.

<button type="button" class="btn btn-primary">Filled</button>
<button type="button" class="btn btn-outline-primary">Bordered</button>
<button type="button" class="btn btn-link">Link</button>

The outline buttons for each context look like this:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Side note: I have displayed these buttons on a grey background so you can also see the the light outlined button.

Setting Sizes

You can make the buttons smaller with the .btn-sm class and bigger with the .btn-lg class. Here are the differences in size:

<button type="button" class="btn btn-success btn-sm">Small button</button>
<button type="button" class="btn btn-success">Regular button</button>
<button type="button" class="btn btn-success btn-lg">Large button</button>

Buttons are inline-block elements. Their width depends on the width of their content. If you want them to fill the full width of their parent, you can use the .btn-block class. Here is an example with buttons on the grid, spanning over different numbers of columns:

<div class="row">
    <div class="col-2">
      <button type="button" class="btn btn-danger btn-block">2 Cols</button>
    </div>
    <div class="col-2">
      <button type="button" class="btn btn-danger btn-block">2 Cols</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-danger btn-block">3 Cols</button>
    </div>
    <div class="col-5">
      <button type="button" class="btn btn-danger btn-block">5 Cols</button>
    </div>
</div>

Button States

Active State

Buttons will appear pressed if you add the .activeclass to them. You should also add the aria-pressed=”true”attribute so assistive technologies know the button is pressed.

<button type="button" class="btn btn-primary active">Primary</button>
<button type="button" class="btn btn-secondary active">Secondary</button>
<button type="button" class="btn btn-success active">Success</button>
<button type="button" class="btn btn-danger active">Danger</button>
<button type="button" class="btn btn-warning active">Warning</button>
<button type="button" class="btn btn-info active">Info</button>
<a href="#a" class="btn btn-light active" role="button" aria-pressed="true">Light</a>
<a href="#a" class="btn btn-dark active" role="button" aria-pressed="true">Dark</a>

Disabled State

To make the buttons inactive, you need to add the disabled attribute to the <button> tag and the .disabled class to the <a> tag. This is because the <a> tag doesn’t accept the disabled attribute. You should also include the aria-disabled=”true” attribute for assistive technologies.

Here is how disabled buttons look:

<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-warning" disabled>Warning</button>
<button type="button" class="btn btn-info" disabled>Info</button>
<a class="btn btn-light disabled" role="button" aria-disabled="true">Light</a>
<a href="#a" class="btn btn-dark disabled" role="button" aria-disabled="true">Dark</a>

Button Groups

If you want to tie buttons together into a group, you need to wrap them in a div with the .btn-group class. This is how the result looks like:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-info">Left</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Right</button>
</div>

You can cluster button groups into button toolbars:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-info">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-info">2</button>
    <button type="button" class="btn btn-info">3</button>
    <button type="button" class="btn btn-info">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">5</button>
  </div>
</div>

This example needs of bit of spacing since the button groups are glued together. You can do this with a CSS rule like this:

.btn-group {
    margin-right: 0.5rem;
}

Side note: we have mentioned rems in the 4th day of Bootstrap 4. Typography is based on rems and it is recommended that you also use rems when defining paddings and margins.

Adding this rule gets this result:

Which is a better way to show how the button groups are separated.

Spacing Utilities

But there is another way to add margins with classes designed by Bootstrap 4 for this. Like we did in the case of the sizing and border utilities, we will go through these utilities even if it may delay a bit the process of learning about more buttons and inputs. I’m adding this part because I think it is easier to learn about the margin and padding utilities and use them than re-write the rules yourself. Getting familiar with them will cut down in the long-run because they will be easier to use than writing the necessary CSS every time.

The classes for margins and padding are created with the following format: .[property][sides]-[size].

Property can be:

m for margins;
p for padding;

Sides can take the value:

t for the top side;
b for the bottom side;
l for the left side;
r for the right side;
y for the top and bottom side;
x for the left and right side;
blank for all sides.

And size can be:

0 for 0 margin or padding;
1 for 1rem * 0.25;
2 for 1rem * 0.5;
3 for 1rem;
4 for 1rem * 1.5;
5 for 1rem * 3;
auto sets the margin to auto;

Button Toolbar with Spacing Utilities

In your case, for the button toolbar, we wanted the button groups o have a margin left of 0.5 rem. So we need to add the class mr-2. This is the resulting code:

<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-info">1</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-info">2</button>
    <button type="button" class="btn btn-info">3</button>
    <button type="button" class="btn btn-info">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">5</button>
  </div>
</div>

A good exercise is to practice this utilities and try to apply different kinds of margins and paddings. We will also do this in the following sections and days.

Using the classed with the definition .[property][sides]-[size]will have the same results on all screens. If you want different spacing on different devices, you can add breakpoints and use the class .[property][sides]-[breakpoint]-[size].

The breakpoint are sm, md, lgand xl. We talked in detail about them in the 2nd day of Bootstrap 4. If you want your margin spacing to be 0.5rem until reaching tablet resolution, 1rem for tablets and laptops and 3rem for desktops on all sides, you would need to add the following classes to your element: .m-2(for screens up to md), .m-md-3(for screens up to desktops) and .m-xl-5.

Sizing Buttons Groups

If you want your button group to have small buttons, instead of adding the .btn-sm on every button, you can add the .btn-group-sm on the group and the buttons will inherit the style. The same behaviour stands for large buttons too.

Here are some examples:

<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>

Vertical Button Groups

You can also stack the buttons in the button group vertically. Instead of using the .btn-group class, you will need the .btn-group-vertical class. Here is an example:

<div class="btn-group-vertical" role="group" aria-label="Vertical example">
  <button type="button" class="btn btn-info">Left</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Right</button>
</div>

This is a wrap on the Bootstrap 4 buttons tutorial. Tomorrow we will explore the other elements necessary inside forms. I hope you are now confident in using and customising your buttons and prepared to go deeper into what Bootstrap 4 has to offer.