What is Bootstrap
Bootstrap is a framework that you can use in your regular HTML coding language. This is used for making the best quality design. Maily we are using our HTML with CSS. But CSS is not the perfect all the time. This framework is also your website responsive.
Resposive means, you can easily open your site or application in any device. This framework are make for the different device. If you write a code and make a table then you can open it different type of device but every device is not showing perfectly. Every device are not in the same device size or regulation. That's why we need the Bootstrap.
Bootstrap makes your table responsive and it opens every device to the best quality design. It makes it easy to design and Bootstrap has a huge predefined class. This class helps to design.
Bootstrap Version 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Learning</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
We know that Bootstrap now has 3 versions. We learn this version step by step.
- Bootstrap 3
- Bootstrap 4
- Bootstrap 5
You must add this below coding in your project head. When you start as Bootstrap 3 you should add this code but if you using Bootstrap 4 or 5 then you must another meta tag. we will discuss about version 4 and 5 in next session. Fristly, we are starting with Bootstrap 3.
Coding For the Body Using Bootsrap 3
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.*****</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.*****</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.*****</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.*****</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.*****</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.*****</p>
</div>
</div>
</div>
</body>
</html>
Learning Coding like Python, HTML
Read More: What is Bootstrap
Read More: HTML formatting tags
This part are the Body part of your First Bootstrap 3. Here we see some class name. If you start Bootstrap then you need to learn about the Bootstrap class name. It's help you to write code and design it.
