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

Integrating Bootstrap's CSS code into the application


Now we'll have to add Bootstrap's CSS code to our application. Of course ,we can simply add a link to the CSS code on CDN in index.html, but doing that does not enable us to profit from the underlying Sass code.

Each component in our app can have its own styles sheets. The main styles of our app are loaded via the styles.css file in the root. We'll set up a build system that compiles Bootstrap's SCSS code and our own modification into the styles.css file.

First, we install Bootstrap's source code via npm by running the following command:

npm install bootstrap --save-dev

Then we set up a similar file structure as we have done already in the preceding chapters of this book:

scss/styles.scss 
scss/includes/_bootstrap.sccs 
scss/includes/_variables.sccs 
 

The scss/_includes/_variables.scss file enables us to override Bootstrap's default values and the scss/_includes/_bootstrap.scss file is a copy of the original bootstrap...