Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 

Table of Content

This is a two-parts article. There are few sections here.

Part One: Offline Template Examples
  • Get Bootstrap Source Code
  • Generate dist (js + css)
  • Open The Offline Examples
  • What's Next
Part Two: Install Jekyll on RVM
  • Install Ruby with RVM
  • Install Jekyll with Bundle
  • Run the site on localhost
  • Conclusion


Preface

Get a local copy of bootstrap template examples.

You can install the boostrap v4.1 template examples as a local offline copy that can be launched from open file manager.

Step

  • Get Bootstrap Source Code

  • Generate dist (js + css)

  • Open The Offline Examples


Get Bootstrap

$ wget -c https://github.com/twbs/bootstrap/archive/v4.1.3.zip

$ unzip v4.1.3.zip

$ cd bootstrap-4.1.3

You can extract anywhere to suit your needs.

Examples Directory

This is the pure html, if you want to start, using templates

$ cd site/docs/4.1/examples

You may consider, clicking the image for bigger resolution.

Bootstrap: examples directory


Generate Dist

We are not done yet. We need to generate dist (jss + css).

There are two methods:

  • Using NPM

  • Manually copy and paste

Using NPM

There is a file named package.json in extracted bootstrap directory. It is an npm package bundle configuration.

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "version": "4.1.3",
  "keywords": [
    "css",
    "sass",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
...
}

Now you need to run npm install in that folder, so that the npm can install the right package.

$ cd bootstrap-4.1.3

$ npm install

Bootstrap: npm install

And npm run dist in the very same folder.

$ cd bootstrap-4.1.3

$ npm run dist

Bootstrap: npm run dist

Copy Using Terminal

$ cd bootstrap-4.1.3

$ cp -a dist site/docs/4.1/

Bootstrap: copy paste dist

Copy Paste Using File Manager

If you have difficulty using terminal, you may use File Manager. Depend on your Desktop Environment, your file manager might be:

  • gnome-shell: nautilus

  • Plasma5: dolphin

  • Cinnamon: nemo

  • Mate: caja

  • XFCE4: thunar

  • LXQT: pcmanfm

  • Pantheon: pantheon-files

I know it looks dumb explaining this, but sometimes I met people who does not have a clue about this. I respect all the reader, both beginner and expert.

$ thunar &

Open The Offline Examples

No server

You do not need Jekyll to have a local copy of your bootstrap. Just open it from file manager to browser, such as firefox, or chromium.

Bootstrap: open from file manager

Open in Your Browser

And this is the result:

Bootstrap: cover using localcopy

Fully Working Site

In order to have a fully working site, you need Jekyll.


What’s Next

Consider finish reading [ Part Two ].

Thank you for reading.