This example shows you how to use react-bootstrap
, from a standard Bootstrap example.
To import a component:
import Component from 'react-bootstrap/Component';
// e.g
import Container from 'react-bootstrap/Container';
import React from "react"; | |
import Container from "react-bootstrap/Container"; | |
import Row from "react-bootstrap/Row"; | |
import Col from "react-bootstrap/Col"; | |
import Image from "react-bootstrap/Image"; | |
import "bootstrap/dist/css/bootstrap.min.css"; | |
import "./App.css"; | |
function App() { | |
return ( | |
<div className="App"> | |
<Container> | |
<Row> | |
<Col xs={12} md={6} lg={2}> | |
<Image | |
src="https://images.dog.ceo/breeds/airedale/n02096051_1861.jpg" | |
fluid | |
/> | |
</Col> | |
<Col xs={12} md={6} lg={2}> | |
<Image | |
src="https://images.dog.ceo/breeds/airedale/n02096051_1861.jpg" | |
fluid | |
/> | |
</Col> | |
<Col xs={12} md={6} lg={2}> | |
<Image | |
src="https://images.dog.ceo/breeds/airedale/n02096051_1861.jpg" | |
fluid | |
/> | |
</Col> | |
<Col xs={12} md={6} lg={2}> | |
<Image | |
src="https://images.dog.ceo/breeds/airedale/n02096051_1861.jpg" | |
fluid | |
/> | |
</Col> | |
<Col xs={12} md={6} lg={2}> | |
<Image | |
src="https://images.dog.ceo/breeds/airedale/n02096051_1861.jpg" | |
fluid | |
/> | |
</Col> | |
<Col xs={12} md={6} lg={2}> | |
<Image | |
src="https://images.dog.ceo/breeds/airedale/n02096051_1861.jpg" | |
fluid | |
/> | |
</Col> | |
</Row> | |
</Container> | |
</div> | |
); | |
} | |
export default App; |
This example shows you how to use react-bootstrap
, from a standard Bootstrap example.
To import a component:
import Component from 'react-bootstrap/Component';
// e.g
import Container from 'react-bootstrap/Container';
In react , we know use the className instead of class. but , In bootstrap site code has class so in react error will occure. so we need to change lot of thing in code. so we have option for use bootstrap in react js without change code. it has already changed code for react developer.
https://debuggingsolution.blogspot.com/2021/04/use-bootstrap-in-reactjs.html