How to use bootstrap with React Js
Last updated : Jul 30, 2023 12:00 AM
The
1. Install react-bootstrap npm package
or
2. Import Bootstrap CSS
Import Bootstrap CSS in
If I want the CDN instead, I can import the CSS file in my
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>3. Use the Bootstrap components
Now I can start using Bootstrap in my components.
import { Button, Container } from "react-bootstrap"
export const App = () => {
return(
<>
<Container className="p-3">
<h1 className="header">Welcome To React-Bootstrap</h1>
A simple Bootstrap component
</Container>
</>
)
}
export default AppSimple Bootstrap Form example
Here is a simple example of what I can do with React Bootstrap.
import { Button, Container, Form } from "react-bootstrap"
export const App = () => {
return(
<Container style={{width: "50%"}}>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="example@learnbestcoding.com" />
<Form.Text className="text-muted">
Your email is safe with us!
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
<Form.Text className="text-muted">
Must be at least 16 characters long
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Keep me loged in" />
</Form.Group>
<Button variant="success" type="submit">Sign up</Button>
</Form>
</Container>
)
}
export default AppRelated Links
