Logo

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/popper.js@1.16.0/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

Related Topics

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.

Bootstrap 4 Jumbotron

Bootstrap 4 Jumbotron Bootstrap offers Jumbotron, which is used to get more attention to specific content or information on the web page. It provides a gray background-color to the content to make that content...

2 minutes read.

Difference between Bootstrap and WordPress

What is WordPress? WordPress is a free open-source CMS (Content Management System) that is written using Hypertext Pre-processor (PHP) and is paired with MySQL and is supported with HTTPS (Hypertext Transfer...

3 minutes read.

Bootstrap 4 Flex

Bootstrap 4 Flex Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement...

26 minutes read.

Bootstrap 4 Alerts

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

1 minute read.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap Notification Bubble

What is a notification bubble? Bubbles are built into the Notification system. They float on top of the website or the button to indicate pending notifications. Bubbles can be expanded to reveal...

5 minutes read.

Bootstrap 4 Pagination

Bootstrap 4 Pagination Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website. In pagination, there is a block...

9 minutes read.

Bootstrap Searchable Dropdown Menu

Searchable Dropdown Menu When we click on the dropdown button/arrow in this dropdown menu, an input field will pop up with all the dropdown items listing inside. If we type in...

5 minutes read.

Bootstrap Tabs and Pills

Bootstrap Menus Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass. <div class="container">       <h3>Example of Bootstrap Menu</h3>       <ul class="list-inline">         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li><a href="#">services</a></li>       </ul>     </div> Try Now Bootstrap Tabs Bootstrap tabl is look like is menu but there is some difference....

4 minutes read.

Bootstrap Pager

← Prev Next → ...

1 minute read.

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

Bootstrap Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 minutes read.

Bootstrap 4 Progress Bar

Bootstrap Progress Bar Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the...

9 minutes read.

Bootstrap 4 Collapse

Bootstrap 4 Collapse Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc.  When we click on a...

4 minutes read.

Bootstrap Navigation bar

Navigation Bars In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen...

3 minutes read.

Difference between bootstrap.css and bootstrap-theme.css

The "bootstrap.css" uses to create a website with pre-existing designs and context. It uses basic Bootstrap classes like rows and columns with a CSS styling tool. The website is styled...

5 minutes read.