Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
Bootstrap 4 is the newest version of Bootstrap
Bootstrap Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap 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.1.3/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”jumbotron text-center”>
<h1>My First Bootstrap Page</h1>
<p>Resize this page to see the responsive effect!</p>
</div>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-4″>
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class=”col-sm-4″>
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
ith more than 12 million inhabitants.</p>
</div>
<div class=”col-sm-4″>
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
Browser Support
Bootstrap 4 is the newest version of Bootstrap.
Bootstrap 4 supports all major browsers except Internet Explorer 9.
Bootstrap Containers
The container class is one of the most important Bootstrap classes.
It provides margins, padding, alignments, and more, to HTML elements.
Example
<div class=”container”>
<h1>This is a paragraph</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
Bootstrap Text Colors
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Example
<div class=”container”>
<p class=”text-muted”>This text is muted.</p>
<p class=”text-primary”>This text is important.</p>
<p class=”text-success”>This text indicates success.</p>
<p class=”text-info”>This text represents some information.</p>
<p class=”text-warning”>This text represents a warning.</p>
<p class=”text-danger”>This text represents danger.</p>
</div>
Bootstrap Columns
Three equal-width columns, on all devices and screen widths:
Example
<div class=”row”>
<div class=”col”>.col</div>
<div class=”col”>.col</div>
<div class=”col”>.col</div>
</div>
Responsive Columns
Three equal-width columns scaling to stack on top of each other on small screens:
Example
<div class=”row”>
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-4″>.col-sm-4</div>
</div>
0 Comments