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>

<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 />

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

Press esc to disable tab trapping

API

Imageview source file

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.

Images#

Shape#

Fluid#

API#

Image#view source file

Images

Shape

Fluid

API

Imageview source file