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 <div> and <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.

Buttons

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 <button>, <a>, and <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:

Buttons in Bootstrap

buttons.html

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. JavaScript, we should assign them the role=button attribute. Or, we can use the <button> element for this purpose, which would be semantically more correct. Ideally, we should use the <a> elements only for buttons that redirect us to another URLs.

Button outlines

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 start with .btn-outline-, e.g. .btn-outline-primary and such.

Buttons in Bootstrap

buttons.html

Sizes

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

Buttons in Bootstrap

button_sizes.html

States

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 (:active pseudo-element).

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.

Inactive buttons

In the same way we can render a button as inactive using the .disabled class. We also add aria-disabled=true for readers. The .disabled class is useful e.g. for links which, unlike buttons, we can't really disable using the disabled="disabled" 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 tabindex="-1" attribute.

Togglers

We can transform buttons into togglers using Bootstrap's JavaScript plugin. All Bootstrap JS plugins are usually distributed in one .js file which you can download from the official site and link inside the <head> 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 aria-pressed=true attribute for screen readers.

Togglers in Bootstrap

buttons_togglers.html

Button groups

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, usually <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.

The result:

Button groups in Bootstrap

buttons_groups.html

Sizes

To set the button size of a group, we assign one of the following classes to the whole group, i.e. the <div> element.

.btn-group-lg for large buttons
Nothing for standard buttons
.btn-group-sm for small buttons

Button sizes in Bootstrap

buttons_groups_sizes.html

Dropdown

If we wanted one of the buttons to behave as a dropdown (a button with additional expandable options), we add it as another button group to an already existing group. Don't forget to link the JavaScript in which the dropdown functionality is implemented. Groups can be nested one in another. Since we'll discuss dropdowns further in the course, we won't bother with them much now. Let's just take a peek how they look like:

Dropdrowns in Bootstrap

buttons_groups_dropdown.html

Vertical groups

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.

Button groups in Bootstrap

buttons_vertical_groups.html

Toolbars

We create toolbars by wrapping several button groups. We can insert other elements there as well, such as inputs.

Toolbars in Bootstrap

toolbar_buttons.html

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.

Checkboxes and radio buttons in Bootstrap

buttons_checkboxes_and_radio_buttons.html

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.

Article has been written for you by David Capka Hartinger

User rating:

3 votes

The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.

David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.

Activities