You Are Here

Bootstrap 4 Buttons

In this Bootstrap 4 buttons tutorial, you will learn how to create and modify buttons with the help of bootstrap 4. You can create a button by using the .btn class and by using some classes, you can style a button. These classes are as follows:
  • btn-primary
  • btn-secondary
  • btn-success
  • btn-danger
  • btn-warning
  • btn-info
  • btn-light
  • btn-dark
  • btn-link

Example:

<button type="button" class="btn btn-primary"> Primary button </button>
<button type="button" class="btn btn-secondary"> Secondary button </button>
<button type="button" class="btn btn-success"> Success button </button>
<button type="button" class="btn btn-danger"> Danger button </button>
<button type="button" class="btn btn-warning"> Warning button </button>
<button type="button" class="btn btn-info"> Info button </button>
<button type="button" class="btn btn-light"> Light button </button>
<button type="button" class="btn btn-dark"> Dark button </button>
<button type="button" class="btn btn-link"> Link button </button>
Try it

Button Elements:

Bootstrap 4’s button styles are not only designed to be used with the <button> element, but they can also be applied to <input> and <a> elements.
You can also use the button styles to an <label> element when working with checkboxes and radio buttons.

Example:

<button class="btn btn-primary" type="submit"> Button </button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<a class="btn btn-primary" href="#" role="button"> Hyper link </a>
Try it

Button Outlines:

If you need a button with outline or border then use .btn-outline class followed by desired style (for eg. btn-outline-primary).

Example:

<button type="button" class="btn btn-outline-primary"> Primary button </button>
<button type="button" class="btn btn-outline-secondary"> Secondary button </button>
<button type="button" class="btn btn-outline-success"> Success button </button>
<button type="button" class="btn btn-outline-danger"> Danger button </button>
<button type="button" class="btn btn-outline-warning"> Warning button </button>
<button type="button" class="btn btn-outline-info"> Info button </button>
<button type="button" class="btn btn-outline-light"> Light button </button>
<button type="button" class="btn btn-outline-dark"> Dark button </button>
<button type="button" class="btn btn-outline-link"> Link button </button>
Try it

Button Size:

Bootstrap offers different classes that allow changing the size of the button. You can make buttons larger or smaller by using the classes .btn-lg or .btn-sm.

Example:

<button type="button" class="btn btn-success btn-lg"> Large button </button>
<button type="button" class="btn btn-success btn-sm"> Small button </button>
<button type="button" class="btn btn-success"> Default button </button>
Try it

Block Level Buttons:

You can create block-level buttons (buttons that cover the full width of the parent elements) by adding an extra class .btn-block to the buttons.

Example:

<button type="button" class="btn btn-success btn-block"> Block level button </button>
<button type="button" class="btn btn-primary btn-block"> Block level button </button>
Try it

Active Buttons:

You can make a button or link active by using the .active class.

Example:

<button type="button" class="btn btn-success active"> Active button </button>
<a href="#" class="btn btn-success active" role="button"> Active link </a>
Try it

Disabled Buttons:

To disabled the button use disabled attribute with <button> element. And if the button created with <a> tag then it can be disabled by adding class .disabled.

Example:

<button type="button" class="btn btn-success" disabled> Disabled button </button>
<a href="#" class="btn btn-success disabled"> Disabled link </a>
Try it

Spinner Buttons:

By using spinner-* classes, you can add spinner to the button.

Example:

<button type="button" class="btn btn-success">
<span class="spinner-border spinner-border-sm"> </span> Spinner Button
</button>
<button type="button" class="btn btn-success">
<span class="spinner-grow"> </span> Spinner Button
</button>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *