Lesson 6 - Bootstrap - Buttons
In the previous lesson, Bootstrap - Tables, we finished the CSS styles of the
Bootstrap framework for common HTML elements. In today's CSS Bootstrap tutorial,
we'll move to the next part of the framework and discuss components. Components
are classes styling especially the
<span> elements which allow us to create features that HTML
doesn't support by default yet, simply and fast. Such features are often needed
on regular websites.
We use buttons a lot not only in forms, but also at places where a simple link wouldn't be visible enough. To maintain quality user experience, every important action should be accessible via buttons, whether it's adding items to the cart or a "Search" button somewhere in the sidebar.
We usually create buttons using the
<input> elements with the
.btn class assigned. That will make them inline blocks. As always,
we have several classes for buttons of the standard colors available and one
more for transparent buttons.
- .btn-primary - The primary color, blue by default, for the default action
- .btn-secondary - The secondary color, gray by default
- .btn-success - Green for success actions
- .btn-danger - Red for dangerous actions
- .btn-warning - Yellow for highlighting important actions
- .btn-info - Neutral blue for neutral actions
- .btn-light - Light gray
- .btn-dark - Almost black
- btn-link - Aligns a link as a button, but the background is transparent
As always, we should also add some text in an element with the
.sr-only, describing the color meaning for screen readers.
We create buttons, for example, like this:
<button type="button" class="btn btn-success">Send</button>
Let's showcase them a bit:
If we use the
<a> elements to represent buttons which
don't redirect the user to another page, but are rather handled by e.g.
role=button attribute. Or, we
can use the
<button> element for this purpose, which would be
semantically more correct. Ideally, we should use the
elements only for buttons that redirect us to another URLs.
If a form has too many colored buttons, the resulting impression might feel
too outstanding. That's why Bootstrap also provides classes which color only the
border and the button's text, leaving the background transparent. These classes
We can assign different button sizes according to a button's significance. There are the following classes available:
.btn-lg- Large button
.btn-sm- Small button
.btn-block- Block button, occupying the whole row by default
You have surely noticed that an additional outline is added around the button
in a case it's active (we've just clicked on it and haven't clicked on anything
else yet). This outline disappears when the button isn't the active element of
the page (
Forcing the active style
If we ever needed to render an inactive button as active, we can use the
.active class. For semantic correctness, we should also add the
aria-pressed=true attribute for screen readers.
In the same way we can render a button as inactive using the
.disabled class. We also add
.disabled class is useful e.g. for links which, unlike
buttons, we can't really disable using the
attribute. Bootstrap sets the arrow cursor to inactive buttons and they actually
can't be clicked. Since it's still possible to "click" on such buttons using the
keyboard, we should also add the
All Bootstrap JS plugins are usually distributed in one .js file which you can
download from the official site and link inside the
element. Togglers, unlike buttons, stay pressed until we click on them again. To
achieve this behavior, we add the
data-toggle="button" attribute to
given elements. If we want the toggler to be pressed by default, we assign the
.active class together with the
attribute for screen readers.
We can group buttons so they form a single continuous button bar. That looks
good if all the buttons are related to e.g. some widget. We implement this
functionality using the
.btn-group class assigned to an element,
<div>, which wraps the individual buttons.
A button group can be created like this:
<div class="btn-group" role="group" aria-label="Choose a candidate"> <button type="button" class="btn btn-secondary">Previous</button> <button type="button" class="btn btn-primary">Choose</button> <button type="button" class="btn btn-secondary">Next</button> </div>
Bootstrap encourages to use the
role=group attribute for all
elements which group something. We can also stumble across the
role="toolbar" value used for toolbars which can contain multiple
different button groups.
To set the button size of a group, we assign one of the following classes to
the whole group, i.e. the
.btn-group-lgfor large buttons
- Nothing for standard buttons
.btn-group-smfor small buttons
We can group buttons vertically as well. Dropdowns are not supported in this
variant. In this case, we don't assign the
.btn-group class to the
group at all and we use the
.btn-group-vertical class instead.
We create toolbars by wrapping several button groups. We can insert other elements there as well, such as inputs.
Checkboxes and radio buttons
Although we're going to discuss forms further in the course, we can mention that we can style radio buttons and checkboxes to look as buttons in a group. It's basically a combination of togglers and button groups as we have seen above.
Now we've the buttons in Bootstrap all covered. In the next lesson, Bootstrap - Forms, we'll discuss a larger topic, forms, and all the features related to them.