Get started with Bootstrap

Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps.

Bootstrap also gives you the ability to easily create responsive designs

Table of Contents

Advantages of using Bootstrap:

Easy to use
Responsive features
Mobile-first approach
Browser compatibility
It saves time and effort. With Bootstrap, you can focus on writing your content, and the framework will take care of the rest.
Developers can customize their site using Bootstrap to suit their needs.
Bootstrap is responsive. It can be used on any device without crashing.
Bootstrap has a simple grid system for developing responsive websites.

Prerequisites

To follow along with this tutorial, you need to have the following:

Basic knowledge of HTML and CSS.
An IDE installed, preferably Visual Studio Code.

how to install bootstrap in react js

Let us discuss the steps required to install Bootstrap.

Step 1: npm install

Write this command in terminal.

npm install bootstrap

Step 2 : Index.js

Write this code in your main file (index.js / App.js).

import 'bootstarp/dist/css/bootstrap.min.css'

Example :


<div classname="card" style="width: 18rem;">
  <img src="..." classname="card-img-top" alt="...">
  <div classname="card-body">
    <h5 classname="card-title">Card title</h5>
    <p classname="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" classname="btn btn-primary">Go somewhere</a>
  </div>
</div>

Output :

I hope you like this Get started with Bootstrap article.