bootstrap-4-buttons

Day 6: Bootstrap 4 Buttons Tutorial and Examples

 

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:

Let’s star pushing some buttons!

bootstrap-4-push-the-button

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:

dark



 

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:

dark



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.

dark



The outline buttons for each context look like this:

dark



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:

dark



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:

dark


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.

dark


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:

dark


Button Groups and Toolbars

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:

dark


Button Toolbar

You can cluster button groups into button toolbars:

dark



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

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:

dark

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:

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:

dark


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:

dark



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.

Further Reading

If you want to edit the code used in this article, you can see it live on CodePen. If you run into trouble, please let me know in the comments section below. And if you have some time left, be sure to check out the official Bootstrap 4 documentation:

Have a nice evening and see you tomorrow for a new day of Bootstrap 4!

bootstrap-4-buttons-end

Photo credit to Joyce Aquinofor her shot.

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.