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
<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">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://firstname.lastname@example.org/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
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://email@example.com/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.
|Exercises & Assignments|
|No Content Found.|
|Interview Questions & Answers|
|No Content Found.|