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

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> 

Save. You should see the following result:

We've made great progress. Our key elements are taking shape.

With our fundamental markup structure in place, we can start working on the finer details. Getting there...