How it works…

In step 1, we set up our HTML structure. To create buttons, we used HTML's a tag, and assigned them btn classes in the usual way. However, instead of assigning them the existing button classes, such as class="btn btn-primary", we changed the second class to a custom class name, such as btn-tomato. This way, we are mirroring Bootstrap's button naming convention, which is great for productivity and collaboration.

Similarly, we set up outline buttons using class="btn btn-outline-*", where * represents the custom color (tomato, green, or purple).

In step 2, we imported the mixins into our main.scss file, in order to be able to use the mixins to make our custom buttons.

In steps 3 and 4, we imported the SCSS file for this recipe ...

Get Bootstrap 4 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.