Components

#Images Image

#Shape

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

<Grid>
  <Row>
    <Col xs={6} md={4}>
      <Image src="/thumbnail.png" rounded />
    </Col>
    <Col xs={6} md={4}>
      <Image src="/thumbnail.png" circle />
    </Col>
    <Col xs={6} md={4}>
      <Image src="/thumbnail.png" thumbnail />
    </Col>
  </Row>
</Grid>;

#Responsive

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

<Image src="/thumbnail.png" responsive />;

#Props[source]

NameTypeDefaultDescription
responsive
boolean
false

Sets image as responsive image

rounded
boolean
false

Sets image shape as rounded

circle
boolean
false

Sets image shape as circle

thumbnail
boolean
false

Sets image shape as thumbnail

bsClass
string
'img'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#Thumbnails Thumbnail

Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.

#Anchor Thumbnail

Creates an anchor wrapping an image.

171x180
171x180
171x180
<Grid>
  <Row>
    <Col xs={6} md={3}>
      <Thumbnail href="#" alt="171x180" src="/thumbnail.png" />
    </Col>
    <Col xs={6} md={3}>
      <Thumbnail href="#" alt="171x180" src="/thumbnail.png" />
    </Col>
    <Col xs={6} md={3}>
      <Thumbnail href="#" alt="171x180" src="/thumbnail.png" />
    </Col>
  </Row>
</Grid>;

#Divider Thumbnail

Creates a divider wrapping an image and other children elements.

242x200

Thumbnail label

Description

&nbsp;

242x200

Thumbnail label

Description

&nbsp;

242x200

Thumbnail label

Description

&nbsp; 

<Grid>
  <Row>
    <Col xs={6} md={4}>
      <Thumbnail src="/thumbnaildiv.png" alt="242x200">
        <h3>Thumbnail label</h3>
        <p>Description</p>
        <p>
          <Button bsStyle="primary">Button</Button>
          &nbsp;
          <Button bsStyle="default">Button</Button>
        </p>
      </Thumbnail>
    </Col>
    <Col xs={6} md={4}>
      <Thumbnail src="/thumbnaildiv.png" alt="242x200">
        <h3>Thumbnail label</h3>
        <p>Description</p>
        <p>
          <Button bsStyle="primary">Button</Button>
          &nbsp;
          <Button bsStyle="default">Button</Button>
        </p>
      </Thumbnail>
    </Col>
    <Col xs={6} md={4}>
      <Thumbnail src="/thumbnaildiv.png" alt="242x200">
        <h3>Thumbnail label</h3>
        <p>Description</p>
        <p>
          <Button bsStyle="primary">Button</Button>
          &nbsp;
          <Button bsStyle="default">Button</Button>
        </p>
      </Thumbnail>
    </Col>
  </Row>
</Grid>;

#Props[source]

NameTypeDefaultDescription
src
string

src property that is passed down to the image inside this component

alt
string

alt property that is passed down to the image inside this component

href
string

href property that is passed down to the image inside this component

onError
function

onError callback that is passed down to the image inside this component

onLoad
function

onLoad callback that is passed down to the image inside this component

bsClass
string
'thumbnail'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.