Bootstrap 4 Components

Buttons

You can add buttons to a form, dialogs, and navigation using the class .btn followed by one of the seven predefined button styles each having its own semantic purposes.

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

Button Tags

The class .btn is designed to be used with <button> element. But can be used within anchor element <a>...</a> and within <input> elements, although it is recommended to use <button> tags as it has better consistency across browsers.

Link Button <a class="btn btn-primary" href="#">Link</a> <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">

Note: if you are using <a> element to act as a button rather than for navigation purpose, use role=button for understanding their purpose by assistive technologies like screen readers.

Button Outlines

If you want to remove the background colors that each button styles come with or any other background images, you can replace the default modifier classes with .btn-outline-primary class. This will remove the background color and draws an outline around the button with the semantic color.

Primary Secondary Success Info Warning Danger <button class="btn btn-outline-primary" type="button">Primary</button> <button class="btn btn-outline-secondary" type="button">Secondary</button> <button class="btn btn-outline-success" type="button">Success</button> <button class="btn btn-outline-info" type="button">Info</button> <button class="btn btn-outline-warning" type="button">Warning</button> <button class="btn btn-outline-danger" type="button">Danger</button>

Button Size

You can change the size of the button to a smaller one or a larger one using .btn-sm .btn-lg classes.

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

We can create a block level button that spans the length of its parent by adding .btn-block.

Block level button Block level button <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Active State

You don't need to specify any particular class with <button> to indicate its active state although you can use .active class and .aria-pressed=true attribute to force that behavior into an element that is behaving as a button.

Primary link Link <a class="btn btn-primary btn-lg active" href="#">Primary link</a> <a class="btn btn-secondary btn-lg active" href="#">Link</a>

Disabled State

You can make buttons look disabled by adding a disabled boolean attribute to <button> element. But in cases when you are using an <a> element you have to use .disabled class for the button to appear disabled.

Primary button Button

• When using a <button> element

  Primary button Button <button class="btn btn-lg btn-primary" disabled="disabled" type="button">Primary button</button> <button class="btn btn-secondary btn-lg" disabled="disabled" type="button">Button</button>

• When using <a> element

  Primary link Link <a class="btn btn-primary btn-lg disabled" href="#">Primary link</a> <a class="btn btn-secondary btn-lg disabled" href="#">Link</a>

Note: to indicate the state of the button to assistive technologies include aria-disabled="true" in the <a> element with the .disabled class.

Toggle State

Add class data-toggle=”button”  to toggle a button's active state.

Toggle <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle</button>