Bootstrap 4 Outline Buttons

Bootstrap has announced the first alpha release of Bootstrap 4. Bootstrap 4 is built using Sass, instead of Less and comes with an improved grid, inverse table and what we are going to look at today, outline buttons.This is how Boostrap outline buttons look like:

See the Pen Bootstrap 4: Outline Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen.

Bootstrap Outline Buttons

In general, the HTML for the Bootstrap outline buttons looks like this:

<button type="button" class="btn btn-*-outline">Button</button>

btn-*-outline is the class that makes the button a outline button.

Where * is the available styled button name: primary, secondary, info, success, warning and danger.


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


<button type="button" class="btn btn-secondary-outline">Secondary</button>


<button type="button" class="btn btn-info-outline">Info</button>


<button type="button" class="btn btn-success-outline">Success</button>


<button type="button" class="btn btn-warning-outline">Warning</button>


<button type="button" class="btn btn-danger-outline">Danger</button>

The great thing is outline buttons are built into Bootstrap 4, so there is no need for us to extend Bootstrap anymore to provide them.