Bootstrap 4: Buttons

Bootstrap 4: Buttons

A tutorial for beginners on how to use Bootstrap 4 buttons

A tutorial for beginners on how to use Bootstrap 4 buttons

Introduction

Bootstrap comes with a load cool stuff so you can make custom buttons. You can use the buttons for all sorts of things like submitting forms, expanding content and linking to new pages. There are numerous styles available so you can adjust their look to your heart’s content.

Bootstrap’s button styles are brought into your code using the .btn class as shown below.

<button type="button"class="btn">A Button</button>

A basic button with no additional styles

Tags

A few elements can be styled using Bootstrap’s buttons so we’ll have a look at those first.

Common sense would suggest that the .btn classes are for <button> elements however, whilst they were designed for that, they can be added to other elements. The classes will also work on <a> and <input> elements.

The example below shows these different elements styled as buttons which perform some kind of in-page action (e.g. submit a form, expand some content, reset a form). You’ll see in the example that I’ve added role="button" to the <a> element. That is necessary to tell screen readers and other assistive technology what the purpose of the link is.

Standard Button Styles

Up to now we have added any styles to the buttons. Having said that, even with the very simplified code above some style will be applied. There are a number of colours we can apply to our buttons. This is pretty helpful to convey some kind of meaning. For example you might want to use green to submit a form or perhaps red to reset a form.

Whatever you chose, remember users who rely on assistive technology like screen readers will not benefit for your use of colour. As such you should make sure the content (probably text) of the button tells the user what the button does (e.g. by writing “submit” on your green submit button). If it doesn’t you should consider hiding some text on the button using the .sr-onlyclass. This will allow screen readers to tell the user what the button does without anyone else seeing that text.

Outline Button Styles

If you don’t want your buttons to be filled with colour there are also the options for outline buttons. On these the colour is applied to the border and the text with the background removed as shown below. They have a particularly cool hover style imo.

Button Sizes

Bootstrap also gives you several options for the size of your buttons so you can pick the most appropriate for your project. For the standard size button you do not need to add any additional classes (although .btn-md will have the same effect). A larger button than usual requires .btn-lg. A smaller button requires .btn-sm.

Outside of the three “normal” buttons, there are also block level buttons. A block level button takes up the full width of its parent element. To create a block level button simply add .btn-block to your code.

Disabled / Active States

Bootstrap 4 buttons have built in styles for active states (i.e. when the button is being pressed), hover states (i.e. when the mouse cursor is over the button) and disabled states (i.e. when the button cannot be pressed).

You can force buttons to take on the active and disabled states easily. To make a <button> or a button styled <a> look like it’s pressed you just add .active. If you force the <button> or <a> to appear active using the .active class you should also add aria-pressed="true" for the benefit of those using assistive technology like screen readers.

To make a <button> unclickable you simply add the disabled attribute to it.

To make an <a> appear disabled you need to add the .disabled class to it as the disabled attribute is not supported on <a> elements. You should add aria-disabled="true" to your disabled <a> element for the benefit of those using assistive technology.

The .disabled class uses pointer-events: none to prevent the link working. However, users who are browsing with keyboard navigation will still be able to activate the link. To prevent this you can add tabindex="-1" which will stope the keyboard being able to focus on them. You can also use some JavaScript to stop them working but that’s for another post.