Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Bootstrap 4 Cookbook

You're reading from   Bootstrap 4 Cookbook Solutions to common problems faced in Responsive Web Design

Arrow left icon
Product type Paperback
Published in Jun 2017
Publisher Packt
ISBN-13 9781785889295
Length 338 pages
Edition 1st Edition
Languages
Concepts
Arrow right icon
Author (1):
Arrow left icon
Ajdin Imsirovic Ajdin Imsirovic
Author Profile Icon Ajdin Imsirovic
Ajdin Imsirovic
Arrow right icon
View More author details
Toc

Table of Contents (13) Chapters Close

Preface 1. Installing Bootstrap 4 and Comparing Its Versions FREE CHAPTER 2. Layout Like a Boss with the Grid System 3. Power Up with the Media Object, Text, Images, and Tables 4. Diving Deep into Bootstrap 4 Components 5. Menus and Navigations 6. Extending Bootstrap 4 7. Make Your Own jQuery Plugins in Bootstrap 4 8. Bootstrap 4 Flexbox and Layouts 9. Workflow Boosters 10. Creating a Blog with Jekyll and Bootstrap 4 11. Bootstrap 4 with ASP.NET Core 12. Integrating Bootstrap 4 with React and Angular

Installing Bootstrap 4 Jekyll-powered docs

In this recipe, you will see how easy it is to install a copy of the official Bootstrap 4 docs. Running a local copy of the official Bootstrap documentation is a great way to experiment with the available Sass variables, as we will see later in this chapter.

Windows users, you need to have Ruby, Jekyll, and Bundler installed. If you already have them on your system, and providing that you have completed the previous recipe, there are just a few more things to do to run the Jekyll docs.

With your console pointing to chapter3/start/recipe3/bootstrap, run this command: gem install nokogiri -v 1.7.2. Next, run bundle exec jekyll build. This command will build your Jekyll site into ./_gh_pages.

Run cd _gh_pages, then run jekyll serve --watch. Open your own local copy of Bootstrap docs at http://127.0.0.1:4000.

Getting ready

In order to follow this recipe successfully, you should first install Bootstrap 4 via Git. Thus, this recipe assumes that you have a running environment in Cloud9 IDE, and that you have a complete Bootstrap 4 installation as explained in the previous recipe.

How to do it...

  1. Verify that Ruby is preinstalled, and Jekyll is not:
      which ruby; which jekyll

This command will return only the location of Ruby on your VM. Thus, Jekyll needs to be installed.

  1. To install Jekyll, you need to install Bundler first:
      gem install bundler
  1. Now run bundle install, which will install Jekyll:

      bundle install
  1. Verify that Jekyll is installed:

      bundle show jekyll
  1. Serve Bootstrap 4 Jekyll-powered docs on Cloud9 IDE:

      bundle exec jekyll serve --host $IP --port $PORT --baseurl ''

Upon running this command, a notification will pop up with a link to preview the running webpage. Click on the link and choose one of the display options:

  1. Click on the link, and your very own copy of the Bootstrap docs will appear:

You have been reading a chapter from
Bootstrap 4 Cookbook
Published in: Jun 2017
Publisher: Packt
ISBN-13: 9781785889295
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime