Bootstrap 4 Tutorial

What is Bootstrap?

Bootstrap is a CSS (Cascading Style Sheets) framework, which is used to develop a responsive website. It is an open-source and mobile-first front-end framework. It has design templates that are based on HTML and for typography, buttons, forms, navigation, etc.

Bootstrap is a web framework that aims to make easier and faster development of web pages. It also consists of many Javascript components, which are in the form of jQuery plugins. These plugins provide many other user interface elements like tooltips, dialog boxes, and carousel. 

History of Bootstrap

Bootstrap, previously known as Twitter Blueprint, was developed by Mark Otto and Jacob Thornton as a framework on Twitter to make it compatible with other internal tools. Bootstrap was released as an open-source project on 19 august 2011.

Why use Bootstrap?

Save time - Bootstrap consists of predefined design templates and classes that can be used for saving time and effort.

Responsiveness - Bootstrap helps in developing responsive websites that are automatically adjustable according to the device size.

Browser compatibility - Bootstrap is compatible with almost every browser like Google Chrome, Mozilla Firefox, Internet Explorer, etc.

Open-source – It is an open-source framework, which means it is freely available to everyone.

Bootstrap 4

Bootstrap 4 is the latest version of Bootstrap that consist of new components, new stylesheets, and more responsiveness. The first alpha version of Bootstrap 4 was released on 19 august 2015, and the first beta version was released on 10 August 2017.

Where to get Bootstrap?

There are two ways of using Bootstrap 4; either you can include Bootstrap 4 from CDN (Content Delivery Network) or download Bootstrap 4 from the official site https://getbootstrap.com.

Bootstrap 4 Tutorial

Environment Setup for Bootstrap 4 CDN

CSS (Cascading style sheets)

You have to put the CSS <link> into the <head> tag. The link is givenbelow:-

Compiled and minified CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

JS (JavaScript)

Some components need JavaScript to perform the task. They especially need jQuery, Popper.js, and JavaScript plugins.

You have to place the <script> just before the </body> tag is close. The link is given below:-

jQuery library

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

Popper JS

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

Latest compiled Java Script

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Create Web page using Bootstrap 4

  • Add the HTML5 DOCTYPE

Bootstrap 4 needs HTML 5 DOCTYPE because it uses HTML elements and CSS properties.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html> 
  • Bootstrap 4 is mobile first

Bootstrap is designed so that websites are responsive on mobile.

<meta name =”viewport” content=”width=device-width, initial-scale=1”>

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>
<body>
  <div class="container">
  <h1>Welcome</h1>
  <p>This  is the first page of Bootstrap</p>
  <p>The .container class provides a responsive fixed width container.</p>          
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html> 

Output

Bootstrap 4 Tutorial

Bootsrtap Index

Bootstrap 4 Grid

Misc