❮ Bootstrap4 Jumbotron Bootstrap4 Images ❯

Bootstrap4 `Installation and Usage`

We can install Bootstrap4 using the following two methods:

Using the Bootstrap 4 CDN.
Downloading Bootstrap 4 from the official website getbootstrap.com.

Bootstrap 4 CDN

It is recommended to use the library on Staticfile CDN for users in China:

Bootstrap4 CDN

<!-- New Bootstrap4 core CSS file -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery file. Make sure to include before bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js is used for pop-ups, tooltips, and dropdown menus, includes popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- Latest Bootstrap4 core JavaScript file -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Note: popper.min.js is used for setting up pop-ups, tooltips, and dropdown menus. Currently, bootstrap.bundle.min.js already includes popper.min.js.

Additionally, you can use the following CDN services:

Recommended for China: https://www.staticfile.org/
Recommended internationally: https://cdnjs.com/

Download Bootstrap 4

You can download the Bootstrap4 repository from the official website https://getbootstrap.com/.

Note: You can also install it via package management tools like npm, gem, composer, etc.:

npm install [email protected]
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

Creating Your First Bootstrap 4 Page

1. Add HTML5 doctype

Bootstrap requires the use of the HTML5 file type, so you need to add the HTML5 doctype declaration.

The HTML5 doctype is declared in the document header and sets the corresponding encoding:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

Mobile Device First

To make Bootstrap-developed websites friendly for mobile devices, ensure proper rendering and touch zooming by adding the viewport meta tag in the head of the webpage, as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width sets the width to the device screen width.

initial-scale=1 sets the initial zoom level.

shrink-to-fit=no automatically adapts to the width of the mobile screen.

Container Classes

Bootstrap 4 requires a container element to wrap the website content.

We can use the following two container classes:

.container class for a fixed width and responsive layout.
.container-fluid class for a 100% width, occupying the entire viewport.

Two Bootstrap 4 Pages

Bootstrap4 .container Example

<div class="container">

<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

The following example shows a container that spans the entire viewport.

Bootstrap4 .container-fluid Example

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>Using .container-fluid, 100% width, spans the entire viewport.</p>
</div>