Change the shape using rounded-* classes
Use the rounded, roundedCircle and thumbnail props to customise the image and use the fluid to scale image nicely to the parent element.
<div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
return (
<Row>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid rounded />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid roundedCircle />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid thumbnail />
</Col>
</Row>
);
}
export default ImageShapes;import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
return (
<Row>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid rounded />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid roundedCircle />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid thumbnail />
</Col>
</Row>
);
}
export default ImageShapes;<template>
<div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>
</template><template>
<div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>
</template><div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>Change the shape of an image using .rounded or .circle .rounded-1,2,3
<div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
return (
<Row>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid rounded />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid roundedCircle />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid thumbnail />
</Col>
</Row>
);
}
export default ImageShapes;import React from 'react';
import { Col, Image, Row } from 'react-bootstrap';
const ImageShapes = () => {
return (
<Row>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid rounded />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid roundedCircle />
</Col>
<Col sm={6} md={3} >
<Image src={ThumbImg} alt="img" fluid thumbnail />
</Col>
</Row>
);
}
export default ImageShapes;<template>
<div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>
</template><template>
<div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>
</template><div class="row">
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid rounded" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid circle" alt="img">
</div>
<div class="col-sm-6 col-md-3">
<img src="dist/img/img-thumb.jpg" class="img-fluid img-thumbnail" alt="img">
</div>
</div>