Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Applying style to the buttons


Our design contains several buttons now: the button in the footer, the search button, the toggle button for the off-canvas menu, and also the button of the comment form. Let's find a better solution to style the button of our theme.

Remember that you can apply Bootstrap's btn and btn-* CSS classes on the <button> tag and also use them on <a> and <input> tags.

First, create a new Sass partial called assets/scss/includes/_buttons.scss and then move the btn-accent-color selector into it. The assets/scss/includes/_buttons.scss file should contain the following SCSS code:

.btn-accent-color { 
  @include button-variant(#fff, $accent-color, #fff); 
} 

Again we'll have two strategies to style the buttons of the theme. We can adopt the HTML code and make sure that every button has the required btn and btn-* CSS classes. Or alternatively create some generic CSS selectors to style the buttons.

When using generic selectors in the assets/scss...