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>;
    Press esc to disable tab trapping

    Fluid

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

    <Image src="holder.js/100px250" fluid />;
    Press esc to disable tab trapping

    API

    Imageview source file

    import Image from 'react-bootstrap/Image'
    NameTypeDefaultDescription
    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.