Buttons are made easy with Bootstrap. The team at Bootstrap has taken the guesswork out of button design and has created a set of styles that look modern. Only rarely do I sway away from the default bootstrap design. Buttons were briefly looked at in our previous article. We’ll go into further detail in this section.

https://www.dinocajic.com/bootstrap-p3-margin-and-padding/

The btn class must be applied to each button in order to start using bootstrap’s button styles. Let’s see the changes between the default button style and bootstrap’s version.

<button>Unstyled</button>
<button class="btn">Styled with Bootstrap</button>

When the btn class is applied to the button, the styled button appears as just text on the screen. The styled button also has more padding than the default style.

The size of the button can be changed by applying the btn-lg and btn-sm styles. Note that the btn class must remain in place. The additional classes inherit behavior from the btn class.

As was discussed in the previous article, certain button colors are predefined in bootstrap for specific scenarios. Let’s look at them again.

<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-secondary”>
    btn-secondary
</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-light">btn-light</button>
<button type="button" class="btn btn-dark">btn-dark</button>
<button type="button" class="btn btn-link">btn-link</button>

The size of the button can be changed by applying the btn-lg and btn-sm styles. Note that the btn class must remain in place. The additional classes inherit behavior from the btn class.

<div>
    <button type="button" class="btn btn-primary btn-sm”>
        Small
    </button>
    <button type="button" class="btn btn-primary”>
        Standard
    </button>
    <button type="button" class="btn btn-primary btn-lg”>
        Large
    </button>
</div>

Buttons can also be outlined with the outline classes. The buttons will be transparent with only the border and the text outlined in the specific color.

<div>
    <button type="button" class="btn btn-outline-danger”>
        Danger Outlined
    </button>
    <button type="button" class="btn btn-outline-primary”>
        Primary Outlined
    </button>
</div>
<div class="mt-4 p-4 bg-black">
    <button type="button" class="btn btn-outline-danger”>
        Danger Outlined
    </button>
    <button type="button" class="btn btn-outline-primary”>
        Primary Outlined
    </button>
</div>