How to install Bootstrap Online and Offline

How to install Bootstrap Online and Offline

Apart from manual extracting into the project, you can call Bootstrap online (using a CDN). But there are drawbacks, when you call online, of course, it will reduce the speed of the website.

<script src = ”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”> </script>
The command above will take the Bootstrap file and copy it to the website so that it can be used by other classes or functions.

Instal-Bootstrap

How to install Bootstrap Online

Creating Tables With Bootstrap
Bootstrap makes it easy for you to create tables without having to type rows of program code. You only need to call the classes that are already in the Bootstrap file.

To use a class with a combination of other classes, use a class table plus another class. Examples of use as below:

# to create a stripped table
<table class = “table table-stripped”> Or # to create a table hovel <table class = “table table-hover”>
In the Bootstrap file, there are several classes designed for table creation needs, including “.table”, “.table-striped”, “.table-bordered”, and “.table-hover”.

  • “.Table”: class used to create and define regular / standard tables. This class only adds a small layer and divider horizontally. This class uses the code line <table class = “table”>.
  • “.Table-stripped”: class used to create a table with a zebra style. So the colors of each row are alternating. This class uses the code line <table class = “table table-sripped”>.
  • “.Table-bordered”: is a class that is used to display borders in the table. So the whole table will be attached with a border. This class uses the code line <table class = “table table-bordered”>.
  • “.Table-hover”: you can use it to give a hover effect to a row. This effect will run when you hover your mouse over the row given this class. This class uses the code line <table class = “table table-hover”>.

In addition to a collection of classes for designing tables, there are several classes for coloring table rows and data using Bootstrap, namely “.success”, “.danger”, “.info”. “.Warning”, and “.active”.

To use this class, insert it between the tr tags, like this:

… <Tr class = ”info”> <td> Info </td> <td> Khafid </td> <td> july@example.com </td> </tr> …
Using this class collection, you can design tables that are attractive and easy to read for website visitors.

You can use the below line of code to try to display the table with Bootstrap in the browser.

 

How to Install Bootstrap Offline

This offline Bootstrap installation process makes it easier for you in the development process. Website does not need to retrieve files (resources) from other websites, but directly from the main storage.

Step 1: Create a New Directory Then Download Bootstrap
Add a new folder to the root folder of your web server. If using Linux, just type the command below.

$ mkdir website-bs4
Then download Bootstrap from the official website.

After the download is complete, you will get a zip file with several folders in it.

In this folder, there are several files that are collected into assets and provide several functions and classes in it. You need to extract this zip file first into the project folder so that you can use it.

Step 2: Extract the Bootstrap File
After you move the zip file into the project folder, extract the file in it. You will see a directory layout as shown below:

bootstrap / └── dist / ├── css / │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid .min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js / ├── bootstrap.bundle.js ├ ── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap. min.js └── bootstrap.min.js.map
Step 3: Create an Index.html File
So that you can use Bootstrap and create web pages, open a text editor and create an index.html file. Inside the index.html file fill in a few lines of code, but don’t forget to call the Bootstrap file and other libraries.

For example, below is a simple view using Bootstrap and several other libraries.

<! DOCTYPE html> <html lang = “en”> <head> <title> Bootstrap Example </title> <meta charset = “utf-8 ″> <meta name =” viewport “content =” width = device-width , initial-scale = 1 ″> <script src = ”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script> <link rel = ”stylesheet “Href =” css / bootstrap.min.css “/> <link rel =” stylesheet “href =” css / bootstrap.min.css “> </head> <body>
<div class = ”jumbotron text-center”> <h1> First Bootstrap Page </h1> <p> Resize this responsive page to see the effect! </p> </div> <div class = ”container”> < div class = ”row”> <div class = ”col-sm-4 ″> <h3> Column 1 </h3> <p> Lorem ipsum dolor sit amet, elite adipisicing consectetur … </p> <p> Ut enim ad minimal veniam, quis nostrud exercitation ullamco laboris … </p> </div> <div class = “col-sm-4 ″> <h3> Column 2 </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elite … </p> <p> Ut enim ad minimal veniam, quis nostrud exercitation ullamco laboris … </p> </div> <div class = “col-sm-4 ″> <h3> Column 3 </h3> <p> Lorem ipsum dolor sit amet, elite adipisicing consectetur … </p> <p> Ut enim ad minimal veniam, quis nostrud exercitation ullamco laboris … </p> </div> </div> </div> </ body> </html>
The line of code above doesn’t just call the bootstrap.min.css file which is in the css folder via the line:

<link rel = “stylesheet” href = “css / bootstrap.min.css” />
At this point, you can use Bootstrap to develop websites.

Another Information :