Buttons

Default buttons

The Bootstrap 4 default buttons have received a makeover. You use them just the same way.

<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

The same goes for the outlined buttons.

<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Themed buttons

Apart from the restyled Bootstrap 4 default buttons, there are two extra button classes that are colored differently depending on the color scheme. (Note: At this stage of the alpha, color schemes are not yet available).

<button type="button" class="btn btn-accent-1">Themed Button 1</button>
<button type="button" class="btn btn-accent-2">Themed Button 2</button>

<button type="button" class="btn btn-outline-accent-1">Themed Outline Button 1</button>
<button type="button" class="btn btn-outline-accent-2">Themed Outline Button 2</button>

Pill buttons

Apply btn-pill to create a button with fully rounded edges.

<button type="button" class="btn btn-primary btn-pill">Primary</button>
<button type="button" class="btn btn-outline-primary btn-pill">Primary</button>

Button sizes

Use the class btn-md for a slightly less overwhelming large button.

<button type="button" class="btn btn-accent-1 btn-lg">.btn-lg</button>
<button type="button" class="btn btn-accent-1 btn-md">.btn-md</button>
<button type="button" class="btn btn-accent-1">Default size</button>
<button type="button" class="btn btn-accent-1 btn-sm">.btn-sm</button>

Icon buttons

Icons can be used inside buttons to make for a more visual user experience.

Create New