Layout

Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.

#Media objects Media, Media.Left, Media.Right, Media.Heading, Media.List, Media.ListItem

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media Heading

Nested Media Heading

Media Heading

<div>
  <Media>
    <Media.Left>
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Media Heading</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </Media.Body>
  </Media>
  <Media>
    <Media.Left>
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Media Heading</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>
      <Media>
        <Media.Left>
          <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
        </Media.Left>
        <Media.Body>
          <Media.Heading>Nested Media Heading</Media.Heading>
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
        </Media.Body>
      </Media>
    </Media.Body>
  </Media>
  <Media>
    <Media.Body>
      <Media.Heading>Media Heading</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </Media.Body>
    <Media.Right>
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Right>
  </Media>
  <Media>
    <Media.Left>
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Media Heading</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </Media.Body>
    <Media.Right>
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Right>
  </Media>
</div>;

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Top aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div>
  <Media>
    <Media.Left align="top">
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Top aligned media</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>

      <p>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
        leo. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus.
      </p>
    </Media.Body>
  </Media>
  <Media>
    <Media.Left align="middle">
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Middle aligned media</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>

      <p>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
        leo. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus.
      </p>
    </Media.Body>
  </Media>
  <Media>
    <Media.Left align="bottom">
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Bottom aligned media</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus.
      </p>

      <p>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
        leo. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus.
      </p>
    </Media.Body>
  </Media>
</div>;

You can use media inside list (useful for comment threads or articles lists).

Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<Media.List>
  <Media.ListItem>
    <Media.Left>
      <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
    </Media.Left>
    <Media.Body>
      <Media.Heading>Media heading</Media.Heading>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis.
      </p>

      <Media>
        <Media.Left>
          <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
        </Media.Left>
        <Media.Body>
          <Media.Heading>Nested media heading</Media.Heading>
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis.
          </p>

          <Media>
            <Media.Left>
              <img
                width={64}
                height={64}
                src="/thumbnail.png"
                alt="thumbnail"
              />
            </Media.Left>
            <Media.Body>
              <Media.Heading>Nested media heading</Media.Heading>
              <p>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                scelerisque ante sollicitudin commodo. Cras purus odio,
                vestibulum in vulputate at, tempus viverra turpis.
              </p>
            </Media.Body>
          </Media>
        </Media.Body>
      </Media>

      <Media>
        <Media.Left>
          <img width={64} height={64} src="/thumbnail.png" alt="thumbnail" />
        </Media.Left>
        <Media.Body>
          <Media.Heading>Nested media heading</Media.Heading>
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis.
          </p>
        </Media.Body>
      </Media>
    </Media.Body>
  </Media.ListItem>
</Media.List>;

Name	Type	Default	Description
componentClass	elementType	'div'	You can use a custom element type for this component.
bsClass	string	'media'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Name

Type

Default

Description

componentClass

elementType

'div'

You can use a custom element type for this component.

bsClass

string

'media'

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

Name	Type	Default	Description
align	one of: `'top'`, `'middle'`, `'bottom'`		Align the media to the top, middle, or bottom of the media object.
bsClass	string	'media-left'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Name

Type

Default

Description

align

one of: 'top', 'middle', 'bottom'

Align the media to the top, middle, or bottom of the media object.

bsClass

string

'media-left'

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

Name	Type	Default	Description
align	one of: `'top'`, `'middle'`, `'bottom'`		Align the media to the top, middle, or bottom of the media object.
bsClass	string	'media-right'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Name

Type

Default

Description

align

one of: 'top', 'middle', 'bottom'

Align the media to the top, middle, or bottom of the media object.

bsClass

string

'media-right'

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

Name	Type	Default	Description
componentClass	elementType	'h4'	You can use a custom element type for this component.
bsClass	string	'media-heading'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Name

Type

Default

Description

componentClass

elementType

'h4'

You can use a custom element type for this component.

bsClass

string

'media-heading'

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

Name	Type	Default	Description
align	one of: `'top'`, `'middle'`, `'bottom'`		Align the media to the top, middle, or bottom of the media object.
componentClass	elementType	'div'	You can use a custom element type for this component.
bsClass	string	'media-body'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Name

Type

Default

Description

align

one of: 'top', 'middle', 'bottom'

Align the media to the top, middle, or bottom of the media object.

componentClass

elementType

'div'

You can use a custom element type for this component.

bsClass

string

'media-body'

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

Layout

#Media objects Media, Media.Left, Media.Right, Media.Heading, Media.List, Media.ListItem

Media Heading

Media Heading

Nested Media Heading

Media Heading

Media Heading

#Media Alignment

Top aligned media

Middle aligned media

Bottom aligned media

#Media list

Media heading

Nested media heading

Nested media heading

Nested media heading

#Props

#Media

#Media.Left

#Media.Right

#Media.Heading

#Media.Body