Get started with Bootstrap

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

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 :

Bootstrap Example in react

I hope you like this Get started with Bootstrap article.

Also Read :

Make your own rules for your better future