Figures

Figure (Image Captions)

Add captions to your images with .figure and .figcaption.

figcaption

Carajillo strong, grounds redeye half and half so percolator.

figcaption-bottom

Carajillo strong, grounds redeye half and half so percolator.

figcaption-top

Carajillo strong, grounds redeye half and half so percolator.

figcaption-middle

Carajillo strong, grounds redeye half and half so percolator.

figcaption-full

Carajillo strong, grounds redeye half and half so percolator.

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a dock by water" class="img-responsive" src="../../images/thumbnail_dock.jpg">
    <div class="figcaption figcaption-bottom">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a desk" class="img-responsive" src="../../images/thumbnail_desk.jpg">
    <div class="figcaption figcaption-top">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a typewriter" class="img-responsive" src="../../images/thumbnail_typewriter.jpg">

    <div class="figcaption figcaption-middle">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a typewriter" class="img-responsive" src="../../images/thumbnail_typewriter.jpg">
    <div class="figcaption figcaption-full">
        <div class="figcaption-middle">
            Carajillo strong, grounds redeye half and half so percolator.
        </div>
    </div>
</div>

Figures with Crop Img

Combine figure with crop-img to add captions to your cropped images, setting the height on figure or crop-img is required.

figcaption

Carajillo strong, grounds redeye half and half so percolator.

figcaption-bottom

Carajillo strong, grounds redeye half and half so percolator.

figcaption-top

Carajillo strong, grounds redeye half and half so percolator.

figcaption-full

Carajillo strong, grounds redeye half and half so percolator.

Figcaption Helpers

Change the background color of .figcaption.

figcaption

Carajillo strong, grounds redeye half and half so percolator.

figcaption-primary

Carajillo strong, grounds redeye half and half so percolator.

figcaption-info

Carajillo strong, grounds redeye half and half so percolator.

figcaption-success

Carajillo strong, grounds redeye half and half so percolator.

figcaption-warning

Carajillo strong, grounds redeye half and half so percolator.

figcaption-danger

Carajillo strong, grounds redeye half and half so percolator.

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption figcaption-bottom">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption figcaption-bottom figcaption-primary">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption figcaption-bottom figcaption-info">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption figcaption-bottom figcaption-success">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption figcaption-bottom figcaption-warning">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure">
    <img alt="picture of a coffee mug" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption figcaption-bottom figcaption-danger">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

Figure Helper Classes

Use .figure-circle, .figure-rounded, or .figure-square on .figure to quickly style the borders.

figure-square

Carajillo strong, grounds redeye half and half so percolator.

figure-circle

Carajillo strong, grounds redeye half and half so percolator.

figure-rounded

Carajillo strong, grounds redeye half and half so percolator.

<div class="figure figure-square">
    <img alt="Coffee Cup" class="img-responsive" src="../../images/thumbnail_coffee.jpg">
    <div class="figcaption">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>

<div class="figure figure-circle">
    <img alt="Dock" class="img-responsive" src="../../images/thumbnail_dock.jpg">
    <div class="figcaption figcaption-full">
        <div class="figcaption-middle">
            Carajillo strong, grounds redeye half and half so percolator.
        </div>
    </div>
</div>

<div class="figure figure-rounded">
    <img alt="Desk" class="img-responsive" src="../../images/thumbnail_desk.jpg">
    <div class="figcaption figcaption-bottom">
        Carajillo strong, grounds redeye half and half so percolator.
    </div>
</div>