Bootstrap 4 – Responsive Web Design

Creating outlined buttons

Starting in Bootstrap 4, they've introduced a new button variation which will produce an outlined button instead of a filled one. To apply this look and feel, you need to change up one of the button classes. Let's take a look at the following code for all variations:

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

As you can see, the class names have changed; ...