EN
React - center image in row/column with react-bootstrap
1 answers
0 points
How can I center image in react-bootstrap?
I have the following component:
xxxxxxxxxx1
import { Container, Row, Col } from 'react-bootstrap';2
3
const MyComponent = ({ data }) => {4
return (5
<Container>6
<Row>7
<Col>8
<img9
src={data.url}10
style={{ height: '60vh' }}11
className='rounded'12
/>13
</Col>14
</Row>15
</Container>16
);17
};18
19
export default MyComponent; 1 answer
0 points
You need to change your image to display: block and add margin: auto in X-axis:
xxxxxxxxxx1
className='d-block mx-auto'For your code it would be:
xxxxxxxxxx1
import { Container, Row, Col } from 'react-bootstrap';2
3
const MyComponent = ({ data }) => {4
return (5
<Container>6
<Row>7
<Col>8
<img9
src={data.url}10
style={{ height: '60vh' }}11
className='rounded d-block mx-auto'12
/>13
</Col>14
</Row>15
</Container>16
);17
};18
19
export default MyComponent;0 commentsShow commentsAdd comment
