How to use Bootstrap on the webpage?
There are two ways to include Bootstrap in the website.
1. Include Bootstrap through CDN links
<!– CSS library –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”><!– JavaScript library –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script><!– Latest compiled JavaScript library –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
Example: Basic example of Bootstrap with CDN Link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS library -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<!-- Text color class used -->
<h1 class="text-success">w3wiki</h1>
<p>A computer science portal for geeks</p>
</div>
</body>
</html>
Output:
Download Bootstrap from getbootstrap.com
- Goto www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.
- A.zip file would get downloaded. Extract the zip file and go to the distribution folder. It contains two folders named CSS and JS.
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”> <script src=”js/bootstrap.min.js”> </script> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
- Add the file link to the HTML document and then open the web page using web browsers.
Example: Basic example of Bootstrap with downloaded Bootstrap file link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS library -->
<link rel="stylesheet"
type="text/css"
href="css/bootstrap.min.css">
<!-- JavaScript library -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<!-- Text color class used -->
<h1 class="text-success">w3wiki</h1>
<p>A computer science portal for geeks</p>
</div>
</body>
</html>
Output:
Bootstrap Tutorial
Bootstrap is a widely used open-source front-end framework for web development. It provides a collection of HTML, CSS, and JavaScript components and tools that enable developers to build responsive, mobile-first websites with ease.
This Bootstrap Tutorial is designed for beginners and experienced professionals, covering basics and advanced concepts includes working with Bootstrap CSS classes, incorporating JavaScript plugins, and more. This tutorial will help you with the knowledge and skills to create stunning and responsive websites.
By the end of this tutorial, you’ll have a solid understanding of Bootstrap’s capabilities and be able to apply them effectively in your web development projects.
Prerequisites: To work with Bootstrap, basic knowledge of HTML, CSS, and JavaScript is recommended as prerequisites.