Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

Shape

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

Result

Loading...

Live Editor

import Col from 'react-bootstrap/Col'; import Container from 'react-bootstrap/Container'; import Image from 'react-bootstrap/Image'; import Row from 'react-bootstrap/Row'; function ShapeExample() { return ( <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> ); } export default ShapeExample;

import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Image from 'react-bootstrap/Image';
import Row from 'react-bootstrap/Row';

function ShapeExample() {
  return (
    <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>
  );
}

export default ShapeExample;

Fluid

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

Result

Loading...

Live Editor

import Image from 'react-bootstrap/Image'; function FluidExample() { return <Image src="holder.js/100px250" fluid />; } export default FluidExample;

import Image from 'react-bootstrap/Image';

function FluidExample() {
  return <Image src="holder.js/100px250" fluid />;
}

export default FluidExample;

API

Image