O'Reilly logo

Bootstrap 4 Cookbook by Ajdin Imsirovic

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

How to do it...

  1. Create new files and folders, as follows:
      touch app/partial/_recipe02-08-css.ejs app/partial/_chapter02-08-       html.ejs app/partial/_nav02-08.ejs  main-02-08.scss;      mkdir app/css/img
  1. Let's now update our bower_components. In the root of your project, run the following command to install the font-awesome library:
      bower install font-awesome
  1. Download the image to use in this recipe from https://www.pexels.com/photo/box-business-celebrate-celebration-296878/. Pick the large size (with the width of 1920 pixels) in the download options. Paste the image in the app/css/img folder.
  2. Paste the following code into main-02-08.scss:
      // Recipe 02-08      @import "./bower_components/bootstrap/scss/bootstrap.scss"; @import "./bower_components/font-awesome/scss/font-awesome.scss"; ...

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