DEV Community

Cover image for Bootstrap - Introduction
Sanskrati Jain
Sanskrati Jain

Posted on

Bootstrap - Introduction

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>
Enter fullscreen mode Exit fullscreen mode

The web page will have a different font style, which is the default font style in bootstrap.

web page of the above code

In the next part, we will go through the grid system, buttons, cards, icons, forms, etc.

Top comments (0)