Bootstrap 4 is a newer version of Bootstrap, that is, HTML, CSS, and JavaScript more popular for building advanced websites. Bootstrap, the world's most popular framework for building responsive and mobile sites,

It's free to use!


Why Use Bootstrap?

  • It's easy to get started
  • Excellent grid system
  • Comprehensive list of items
  • The Javascript plugin includes responsive functions
  •  Mobile-based approach
  •  Browser compatibility
  • Good documentation

Quick start Bootstrap 4

Quickly add Bootstrap to your project? Use BootstrapCDN,


CSS 

Copy-paste the stylesheet CDN link inside <head> into your </head> before all other stylesheets. look at the following example below to understand the placement of the bootstrap CDN file 

<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>


javascript

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Bootstrap required jquery, so we are also adding jquery CDN you can place these before the body closing tag in your HTML look at the following example below for bootstrap installation.


#complete example.html


<!DOCTYPE html>
<html>
    <head>
        <title></title>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
</head>
<body>

    <h1>Hello world!</h1>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Responsive meta tag

To ensure correct rendering and zoom touch on all devices, add a responsive viewport meta tag, Add the following line inside your head tag before all your HTML files 

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