FrontEnd web
Published in

FrontEnd web

Reactjs

Install React-Bootstrap into React.js App?

React-Bootstrap is a library build in react js help of the bootstrap CSS framework.

React-bootstrap is a package build with react js and bootstrap.

React-bootstrap rebuilt Bootstrap components designed to work as React components.

Use React-bootstrap. You easily create react app help of bootstrap. react-bootstrap also speed up your workflow

Feature

  • Easily create reusable react component
  • Speed up your work
  • Less code
  • One command setup
  • Well define documentation
Install React-Bootstrap into React.js App?
Photo by Kris Atomic on Unsplash

Installation

Firstly create react app using npm,npx, and yarn. After installation of react.js now available to install React-bootstrap in your app.

Firstly install react js.

npx create-react-app my-app
OR
npm install react
OR
yarn add react

Secondly, install React-bootstrap.

In the second step, you install React-bootstrap in your project with two steps.

  1. yarn or npm
  2. CDN

Yarn or NPM

Install react-bootstrap use of yarn or npm

npm install react-bootstrap bootstrap
OR
yarn add react-bootstrap bootstrap

CDN

Install react-bootstrap by CDN. I do not recommend you to use CDN.

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
crossorigin></script>

<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

How use it?

Steps

  1. Import Bootstrap CSS
  2. Import Component

Import Bootstrap CSS

Firstly import the Bootstrap CSS file inside the index.js file in react.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));

Import Component

Firstly import React-bootstrap Component, Which you like to use in the project currently. In my care, I use Container, Row, and Col Component in my project.

React Code

React-Bootstrap provides lots of Building components by default. You use a predefined build component to build your own website.

Demo

Reference

Read More

--

--

--

FrontendWeb is a platform for writers and readers to read and write a new post about frontend developers, full-stack developers, Web developers, and Computer science. It is an open-source community that join and gathers frontend developers to build and share knowledge with others

Recommended from Medium

It’s time to get rid of Redux

3주차 숙제

How to Structure a Vue.js Project

Video Call Invitations with Agora RTM and RTC Using Vue JS and Flask

A user in a group video call session

An effort to make web apps feel better

Introduction to Javascript part-2

Create a twitch clone using React -6

Understanding Javascript Strings and String Methods

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || https://officialrajdeepsingh.dev/

More from Medium

React JS — Introduction

How to Check the Version in React?

How to check the version in reactjs by Rajdeep Singh

How React To Javascript Is Like Revit To Hand Drafting

React Router V6. What’s New?