The button styles in Bootstrap 4

Like the Bootstrap 3 buttons, Bootstrap 4 also has built-in classes for creating buttons according to context.

You may use button’s contextual classes e.g. “Delete Account” button can be given red color by btn-danger, “Create Account” button can be given green color by btn-success class, deleting a record with redo option can use orange color depicting “warning” by btn-warning class and so on.

A few quick demos

default normal outline small Button links dropdown btn round

In this tutorial, I will show you examples of creating simple buttons, in forms, modal dialogs etc by using pre-defined CSS classes. I will also show you customizing the buttons by overriding the built-in classes – so if you want to use the same names as Bootstrap 4 but desire to add/change the style; this is also covered.

Bootstrap 4 buttons example with all pre-defined classes

Primarily, the buttons are created by using the <button> tag and using main class .btn. This is followed by using a semantic style as per the purpose or context of the button. See the following example online by clicking the link or image below where I utilized all built-in classes for creating normal sized buttons:

Bootstrap 4 buttons

See online demo and code

The markup for buttons:

If you only use the .btn class then a grey-colored button is created without any mouse hover effect. On the other hand, using contextual classes makes button darker background, dark borders and with inset shadow as you hover over the button.

Did you know? Bootstrap 3 has almost all these classes except btn-secondary, btn-light, and btn-dark for creating buttons. You may compare the colors/hovering effect in Bootstrap 3 buttons tutorial.

Buttons without background colors by btn-outline class

This is something new in Bootstrap 4 that enables creating beautiful looking buttons without background colors in normal states. For that, use the “btn-outline-“ class preceded by context name e.g.

btn-outline-primary, btn-outline-info etc.

See the example below for the outline styles:

Bootstrap 4 buttons outline

See online demo and code

The code for buttons:

Creating large and small sized buttons in Bootstrap 4

The Bootstrap 4 also has built-in classes for creating large or small sized buttons by using following built-in classes:

  • .btn-lg – add this class for large sized buttons
  • btn-sm – for small sized buttons

You have to use any of these classes with .btn and button’s context class e.g. btn btn-primary btn-sm. See the demos of various sized buttons:

buttons large

See online demo and code

The code:

Small sized buttons

buttons small

See online demo and code

The small sized buttons code:

Block level buttons example

For creating buttons that span the width of the parent element, you may use the btn-block class. Just like large and small buttons, use the btn-block class with .btn and context related button class. For example:

btn btn-dark btn-block

For this example, I have used a div with grid class and see how buttons take the full width:

buttons block

See online demo and code

The code for creating block sized buttons:

The example of small, large and block sized button with outline class

Similarly, you may create small, large and block level buttons for outline style. See the following example:

buttons outline sizes

See online demo and code

The markup:

Using button classes in <a> tag example

You may also create links as buttons. That means use the button classes in the <a> tag for creating link buttons. As you hover the mouse over that link, the ordinary hand icon should displays. However, the appearance of the link is just like the buttons as we have seen in above examples:

buttons link buttons

See online demo and code

The links with button styles markup:

You can see, the <a> tag is used and .btn class is assigned along with btn-info, btn-success etc. The demo also shows you may use the small, large and block level button classes in link tags for the same appearance as in <button> tag.

I also showed using the btn-outline class for links without background colors in the normal state.

Note: You should give role=”button” in the <a> tag for conveying its purpose to assistive technologies.

Creating button Bootstrap as link example

The button can also be styled looking as a link by using the btn-link class of Bootstrap 4 framework. For example:

<button type=”button” class=”btn btn-link”>A Button as Link</button>

It will appear like a link and display the hand icon as you bring the mouse over that “button”.

Using button classes in form submit button

You may also use button classes of Bootstrap 4 in form’s submit button. This should give the same appearance as with <button> tags.

See the following example of submit button in forms with different button classes:

Bootstrap 4 submit buttons

See online demo and code

The markup for submit buttons:

Create active state buttons example

In above examples, the button comes in active state as you hover over the buttons i.e. button with darker background, dark border and inset shadow. You may create buttons active permanently by using the .active class along with including aria-pressed=”true” attribute. Have a look at the example online:

Bootstrap 4 active buttons

See online demo and code

The markup:

A demo of disabled buttons

Make any button visually disabled by using the .disabled class.

Bootstrap 4 disabled buttons

See online demo and code

The markup:

A demo of using buttons in modal dialog

The following example shows using various buttons in a modal component of Bootstrap 4. To see the demo only, open the demo page and press the button to launch the modal with four buttons used in the footer section:

Bootstrap 4 button modal

See online demo and code

The markup for the demo:

You also need including the Bootstrap JS file after jQuery library for modal component to work.

An example of button dropdown

The following example shows creating button dropdowns by using BS 4 button classes. In addition to .btn and .btn-[context] classes, the dropdown-toggle class is also used along with certain attributes.

See the dropdown button demos with different styles:

Bootstrap 4 button dropdown

See online demo and code

The markup for various sizes, styles (danger, primary etc.) and outline dropdown buttons:

Grab the complete code from the demo page.

A demo of creating rounded Bootstrap 4 buttons

Although, there is no built-in class for creating the rounded buttons in Bootstrap 4. You may easily override the existing classes and customize as per the need or desire for your project.

In this demo, I have taken the built-in classes of btn-danger, btn-warning, btn-dark etc. and created the rounded buttons as shown below:

button rounded

See online demo and code

Following is the CSS that I used in the <style> section after the Bootstrap CSS file reference:

The markup remains the same i.e. using the same class names as in the first demo:

Rounded buttons for btn-outline style demo

In the same way, you may customize the buttons with btn-outline class in round shape or as per the requirement.

See this demo where I have created round buttons with outline class:

button rounded outline

See online demo and code

The CSS:

The markup:

You can see the complete code with output in the example page.

Creating buttons with font-awesome icons demo

You may also use icons in the buttons for describing the purpose by way of text as well as images. In the following example, I have used a few icons of font-awesome library in the buttons of Bootstrap 4.

button icons

See online demo and code

The markup:

 

You need including the font-awesome library. The example used the CDN link.