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

Turning links into buttons

Turning our key content links into visually effective buttons is straightforward. The key classes we'll employ are as follows:

  • The btn class will style a link as a button.
  • The btn-primary class will assign a button the color of our primary brand color.
  • The pull-xs-right class will float the link to the right, moving it into wider space to make it a more appealing target. The xs part of the class name means that it should be applied on every viewport wider than the extra-small breakpoint of 0 pixels. The pull-md-right class only floats the elements on viewports wider than 768 px.

Add these classes to the link at the end of each of our three content blocks:

<p><a class="btn btn-primary pull-xs-right" href="#">See our portfolio</a></p> ...

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