Home » Learn » Bootstrap Tutorial » Bootstrap Get Started

Bootstrap Get Started

In this tutorial, we will learn how to create a simple webpage using the latest Bootstrap 4 framework. It is easy to start using Bootstrap as we just need to include a few Bootstrap JS and CSS files.

There are two common ways to include Bootstrap files into HTML. The first and simple approach will be using Bootstrap CDN files and the second way is to download files locally.

Get Started using Bootstrap CDN

Bootstrap CDN (Content Delivery Network) is a public content delivery network which allows users to load CSS, JavaScript and images remotely from its servers. This means that Bootstrap JS and CSS files are already available online. We just need to include those files URLs in <head> tag of HTML file.

CSS: Here is the link of latest CSS file that needs to paste in <head> of your HTML Document.

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

JS: Here is the links of JavaScript files that needs to paste before the closing </body> tag. Bootstrap requires jQuery & Pooper JS library to be included for features like modals, and tooltips.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

NOTE: To enable functionality properly, these javascript files must be included in the proper order i.e. first include jQuery, then Popper.js, and after that Bootstrap JS or any other JavaScript plugins.

Required HTML Meta Tags:

You need to use <!doctype html> to set up the latest HTML standards, need utf-8 to support various languages and meta viewport (See below) for proper responsive layout.

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

Get Started by Downloading Bootstrap files locally

If you want to include Bootstrap files locally, you can directly download the CSS File and JS file from getbootstrap.com easily and include them on the same location described above.

Creating First Webpage using Bootstrap:

As we have learnt what files needs to include for Bootstrap environment setup, now we will create our first webpage using Bootstrap.

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Tutorial </title>  
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>  
<body>  
   <div class="container">  
     <h1>Bootstrap Example </h1>  
     <p>This is a Simple Bootstrap page. Welcome to TutorialsClass.com </p>
   </div>  
  
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>  
</body>  
</html>

See Result Here: https://codepen.io/tutorialsclass/pen/ExVLjXG

In this example, we have included Bootstrap files and required meta tags into HTML. If you are new to HTML, please visit HTML page structure. Then we have used HTML heading & a simple paragraph.

Here, we are using a Bootstrap class i.e. container class which is basically a responsive width container. We will learn more about Bootstrap containers in the next Chapter.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.