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.
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
And npm run dist in the very same folder.
$ cd bootstrap-4.1.3
$ npm run dist
Copy Using Terminal
$ cd bootstrap-4.1.3
$ cp -a dist site/docs/4.1/
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.
Open in Your Browser
And this is the result:
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.