# 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.


            const thumbnailInstance = (
            <Grid fixed>
              <Row>
              <Col xs={6} md={3}>
                <Thumbnail href="#" alt="171x180" src="/imgs/app/thumbnail.png" />
              </Col>
              <Col xs={6} md={3}>
                <Thumbnail href="#" alt="171x180" src="/imgs/app/thumbnail.png" />
              </Col>
              <Col xs={6} md={3}>
                <Thumbnail href="#" alt="171x180" src="/imgs/app/thumbnail.png" />
              </Col>
              </Row>
            </Grid>
            );

            
          

# Divider Thumbnail

Creates a divider wrapping an image and other children elements.


            const thumbnailInstance = (
              <Grid fixed>
                <Row>
                  <Col xs={6} md={4}>
                    <Thumbnail src="/imgs/app/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="/imgs/app/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="/imgs/app/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

NameTypeDefaultDescription
bsClassstringthumbnailBase CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
altstring
hrefstring
srcstring