This is the first part of the series on Bootstrap for beginners. In this part, we will learn about the bootstrap and its installation.
What is Bootstrap?
It is the most popular front-end framework, used for building responsive web applications.
Why use Bootstrap?
- Increase speed
- Assure responsiveness
- Prevent repetition between projects
- Add consistency
- Ensure cross-browser compatibility
- Large community
- Customizable
Starting with Bootstrap
Using bootstrap in a project is pretty easy, one just has to paste the links of CSS spreadsheet JS plugins like this.
Method 1: By using npm
Or you can use npm install bootstrap and link node_modules/bootstrap/dist/css/bootstrap.css inside head tag and node_module/bootstrap/dist/js/bootstrap.bundle.js inside script tag in your HTML file.
Method 2: By downloading
We have to download the code from the below website and link that CSS spreadsheet and js plugins in our HTML file like we do with our CSS and javascript code file.
Downloading link
Method 3: By using Links
Links are present in the above bootstrap documentation link.
Example
Below is the code which is the basic example to check if bootstrap is working or not.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Starting with Bootstrap</title>
</head>
<body>
<h1>Started with Bootstrap</h1>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
The web page will have a different font style, which is the default font style in bootstrap.
In the next part, we will go through the grid system, buttons, cards, icons, forms, etc.
Top comments (0)