Trending September 2023 # Examples, Working, Methods, How To Use? # Suggested October 2023 # Top 12 Popular

You are reading the article Examples, Working, Methods, How To Use? updated in September 2023 on the website Speedmintonvn.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Examples, Working, Methods, How To Use?

What is a React Bootstrap

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Working with Methods of Adding Bootstrap in React

With the help of packages.

With the help of Bootstrap dependency installation.

With the help of Bootstrap CDN.

1. Adding bootstrap in react with help of bootstrap packages

To include Bootstrap in React, there are 2 methods:

react-bootstrap

reactstrap

Example with react-bootstrap:

The below example focuses on addition using react-bootstrap:

It is installed with npm:

npm install –save react-bootstrap

Our chúng tôi file includes:

import "bootstrap/dist/css/bootstrap.min.css";

Once we install the package, the components can be used in any components file.

Components inside the public folder:

index.html

Components inside the src folder:

AOC folder

App.css

App.js

Menu.js

index.js

styles.css

Components inside the AOC folder:

AboutUS.js

AboutUSdescriptive.js

a. index.html

b. AboutUS.js

Code:

import React , { Component } from "react"; import { Jumbotron , Button } from "react-bootstrap"; import { Link } from "react-router-dom"; export default class PasoAOCInicio extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return ( EDUCBA is a best platform for online training and video courses. We provide trainings related to latest emerging technologies. We help in building up the careers of professionals into these emerging fields. <Button variant="primary" to="/AOC/pasoAOCDatosIdentificativos" as={Link} > ); } }

c. AboutUsdescriptive.js

Code:

import React , { Component } from "react"; import { Button } from "react-bootstrap"; import { Link } from "react-router-dom"; export default class PasoAOCDatosIdentificativos extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return ( <Button variant="primary" to="/AOC/pasoAOCDatosIdentificativos" as={Link} > ); } }

d. App.css

e. App.js

Code:

import React , { useState } from "react"; import { Row , Col } from "react-bootstrap"; import { HashRouter as Router , Route , Redirect } from "react-router-dom"; import PasoAOCInicio from "./AOC/AboutUS.js"; import PasoAOCDatosIdentificativos from "./AOC/AboutUsdescriptive.js"; import Menu from "./Menu"; import "bootstrap/dist/css/bootstrap.min.css"; import "./App.css"; <Route path="/AOC/pasoAOCDatosIdentificativos" component={PasoAOCDatosIdentificativos} ); export default App;

f. Menu.js

Code:

import React from "react"; import Navbar from "react-bootstrap/Navbar"; import Nav from "react-bootstrap/Nav"; import { NavLink } from "react-router-dom"; About Us Contact Info ); export default Menu;

g. index.js

Code:

import React from "react"; import ReactDOM from "react-dom"; import HashRouter from "react-router-dom/HashRouter"; import Container from "react-bootstrap/Container"; import App from "./App"; ReactDOM.render( document.getElementById("root") );

h. styles.css

Code:

.App { font-family: 'Times New Roman', Times, serif; text-align: center; }

Output:

Example with reactstrap

The below example focuses on addition using reactstrap:

It is installed with npm:

npm install -g create-react-app

Our chúng tôi file includes:

import "bootstrap/dist/css/bootstrap.css";

Once we install reactstrap package, the reactstrap components can be used in any components file.

Components inside the public folder:

index.html

Components inside the src folder:

BadgeList folder

Breadcrumb folder

ButtonList folder

Dropdown folder

ListGroup folder

AlertList.jsx

index.js

Components inside BadgeList folder:

index.jsx

Components inside the Breadcrumb folder:

index.jsx

styles.css

Components inside ButtonList folder:

index.jsx

styles.css

Components inside the Dropdown folder:

indexxjsx

Components inside ListGroup folder:

index.jsx

styles.css

a. chúng tôi (in BadgeList folder)

Code:

import React from "react"; import { Badge } from "reactstrap"; return ( Blog What is EDUCBA? ); }; export default BadgeList;

b. chúng tôi (in Breadcrumb folder)

Code:

import React from "react"; import { Breadcrumb , BreadcrumbItem } from "reactstrap"; import "bootstrap/dist/css/bootstrap.css"; import "./styles.css"; const styles = { marginBottom: "21px" }; return ( ); }; export default Bread;

Code:

.breadcrumb { background-color: opaque; }

d. chúng tôi (in ButtonList folder)

Code:

import React from "react"; import { Button } from "reactstrap"; import "bootstrap/dist/css/bootstrap.css"; import "./styles.css"; return ( Software Development Excel Design EDUCBA ); }; export default ButtonList;

e. chúng tôi (in ButtonList folder)

Code:

.btn-success { background-color: #f082ff; }

f. chúng tôi (in Dropdown folder)

Code:

import React from "react"; import { Dropdown , DropdownToggle , DropdownMenu , DropdownItem } from "reactstrap"; import "bootstrap/dist/css/bootstrap.css"; export default class DropdownComponent extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { dropdownOpen: false }; } toggle() { this.setState({ dropdownOpen: !this.state.dropdownOpen }); } render() { return ( ); } }

g. chúng tôi (in ListGroup folder)

Code:

import React from "react"; import { ListGroup , ListGroupItem } from "reactstrap"; import "./styles.css"; return ( ); }; export default Listgroup;

h. chúng tôi (in ListGroup folder)

Code:

.list-group { margin: 31px 0; } a.list-group-item { font-weight: 601; } .list-group-item::before { content: "▶︎"; display: inline-block; padding-right: 9px; font-size: 13px; line-height: 2; }

i. chúng tôi (in src folder)

Code:

import React from "react"; import { Alert } from "reactstrap"; return ( ); }; export default AlertList;

j. chúng tôi (in src folder)

Code:

import React from "react"; import ReactDOM from "react-dom"; import ButtonList from "./ButtonList"; import BadgeList from "./BadgeList"; import AlertList from "./AlertList"; import Listgroup from "./ListGroup"; import Bread from "./Breadcrumb"; import DropdownComponent from "./Dropdown"; const styles = { margin: "21px" }; return ( ); };

k. chúng tôi (in public folder)

Code:

To run this kindly enable JavaScript.

Output:

2. Adding bootstrap in react with help of dependency installation

It is installed with npm:

npm install bootstrap npm install jquery popper.js

Our chúng tôi file includes:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Now let’s code:

index.html

Components inside the src folder:

components folder

index.js

styles.css

Components inside the components folder:

templates folder

HelloWorld.js

Components inside templates folder:

HelloWorldHtml.jsx

a. HelloWorldHtml.jsx

Code:

import React from "react"; return ( ); };

b. HelloWorld.js

Code:

import React, { Component } from "react"; import { HelloWorldHtml } from "./templates/HelloWorldHtml.jsx"; class HelloWorld extends Component { render() { } } export default HelloWorld;

c. index.js

Code:

import React from "react"; import ReactDOM from "react-dom"; import bootstrap from "bootstrap"; import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; import HelloWorld from "./components/HelloWorld"; function App() { return ( ); } const rootElement = document.getElementById("root");

d. styles.css

e. index.html

Code:

3. Adding bootstrap in react with the help of CDN

Hello.js

index.html

index.js

a. chúng tôi Code:

import React from 'react';

b. index.html

Code:

To run this please enable JavaScript.

c. index.js

Code:

import React from 'react'; import { render } from 'react-dom'; import Hello from './Hello'; const styles = { fontFamily: 'times', textAlign: 'center', }; class App extends React.Component { render() { return ( ); } }

Output:

Conclusion

On the basis of the above article, we saw how to use it and the different methods to use it. We went through different examples to understand its works and how to use it according to the different requirements of the website.