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.
Also Read :
- Chakra UI Setup
- Material UI Setup
- Tailwind CSS Setup
- Ionic Framework’s Setup
- Top 10 VS Code extensions
- JavaScript Absolute Beginner’s Guide
- JavaScriptArray Methods
- JavaScript Console Methods
- Getting Started React
Make your own rules for your better future