O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required