Tutorials Tonight's Logo

BOOTSTRAP 4 BUTTONS


Bootstrap provides us different predefined classes to create buttons. These classes can be used to easily create buttons of different style, each serves its own semantic purpose.

To create a basic bootstrap button use .btn class. Bootstrap4 provide us nine different types of button, use these button claases to create button of your choice. These button classes are :

  1. btn-primary
  2. btn-secondary
  3. btn-success
  4. btn-info
  5. btn-warning
  6. btn-danger
  7. btn-dark
  8. btn-light
  9. btn-link

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

Bootstrap button on <a> and <input> tag

Bootstrap's .btn classes are designed to be used with <button> tag, but it can be used with <a> and <input> tags also.

Add role="button" on <a> tag to appropriately convey their purpose.

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button primary</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit Button">
<input class="btn btn-primary" type="reset" value="Reset Button">
▶ Run the code

Outline Buttons

The bootstrap's outline button have transparent background, colored text and colored border.

To create bordered button in bootstrap replace default modifier with .btn-outline-*.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
▶ Run the code

Button Sizes

Using bootstrap classes you can customize size of buttons. Use .btn-lg to make button large and use .btn-sm to make button smaller.

<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-sm">Small button</button>
▶ Run the code

You can also create block level button which cover full width of parent element by adding .btn-block.

<button class="btn btn-primary btn-block">Block Level Button</button>
<button class="btn btn-secondary btn-block">Block Level Button</button>
▶ Run the code


Bootstrap Disabled Buttons

There are many situation when we want a disabled button. Example: when user has not filled all necessary input of a form, when user has not acceped term and condition and many more. So in such situation we disable button to stop further actions.

To make a button disabled use disabled boolean attribute to any button element.

<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled button</button>
▶ Run the code

Note: disabled is a button attribute you can't use it on anchor tag (<a>).

To create a disabled button for <a> tag use .disabled class to it to make it visibally disabled.

Disabled buttons should include the aria-disabled="true" attribute to indicate state of element.

<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
▶ Run the code

Bootstrap Active Button

As can disable a button, we can also make a button visibally active button. To make a button active use .active class.

<button type="button" class="btn btn-primary active">Active button</button>
<button type="button" class="btn btn-primary">Normal button</button>
▶ Run the code

Spinner Buttons

Using bootstrap you can easily create a spinner button by adding a spinner icon in a button. Spinner buttons indicates loading state of any applicaation.

Below is example of spinners in bootstrap:



<div class="spinner-border" role="status"></div>
<div class="spinner-grow" role="status"></div>

To include spinner in button just enclose above code in your button.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>
▶ Run the code

Points to remember:

  1. To create basic button use .btn class.
  2. Bootstrap4 provides 9 different types of button style which are of different colors indicating different meaning.
  3. To create bordered button use .btn-bordered-* class (replace * with button theme you want)
Bootstrap 4 Button Groups

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.