W3cubDocs

Images

Shape

Use the rounded, roundedCircle and thumbnail props to customise the image.

<Container>
  <Row>
    <Col xs={6} md={4}>
      <Image src="holder.js/171x180" rounded />
    </Col>
    <Col xs={6} md={4}>
      <Image src="holder.js/171x180" roundedCircle />
    </Col>
    <Col xs={6} md={4}>
      <Image src="holder.js/171x180" thumbnail />
    </Col>
  </Row>
</Container>

Fluid

Use the fluid to scale image nicely to the parent element.

<Image src="holder.js/100px250" fluid />

API

Image

import Image from 'react-bootstrap/Image'

Name	Type	Default	Description
fluid	boolean	`false`	Sets image as fluid image.
rounded	boolean	`false`	Sets image shape as rounded.
roundedCircle	boolean	`false`	Sets image shape as circle.
thumbnail	boolean	`false`	Sets image shape as thumbnail.
bsPrefix	string	`'img'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/images/