Media object

Abstract object styles for building various types of components that feature a left- or right-aligned image alongside textual content.

Left media

Default media element to left of the content.

96x96

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.

96x96

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.

96x96

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.

Right media

switch image to right of the 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.

96x96

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.

96x96

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.

96x96

Left Media With Right Text

Use .text-right class to the content.

Generic placeholder image

Oat cake

Oat cake topping oat cake jelly soufflé donut jelly-o tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut. Chocolate pie croissant gummi bears muffin dessert.

Generic placeholder image

Jelly chocolate cake

Jelly chocolate cake lemon drops halvah dragée caramels jelly-o biscuit. Fruitcake jelly beans marzipan sesame snaps.Jelly beans cake chocolate cake gummi bears lollipop.

Generic placeholder image

Pudding marshmallow

Pudding marshmallow cheesecake. Chocolate cake apple pie jelly-o bear claw ice cream sugar plum biscuit. Lemon drops brownie biscuit jelly-o biscuit gummies.

Right media With Right Text

Use .text-rightto the content for right align text.

Chupa chups candy

Oat cake topping oat cake jelly soufflé donut jelly-o tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut. Chocolate pie croissant gummi bears muffin dessert.

Generic placeholder image

Chocolate pudding

Jelly chocolate cake lemon drops halvah dragée caramels jelly-o biscuit. Fruitcake jelly beans marzipan sesame snaps.Jelly beans cake chocolate cake gummi bears lollipop.

Generic placeholder image

Cotton candy jelly

Pudding marshmallow cheesecake. Chocolate cake apple pie jelly-o bear claw ice cream sugar plum biscuit. Lemon drops brownie biscuit jelly-o biscuit gummies.

Generic placeholder image
Bordered Media Object

Wrap media list using .media-bordered class for bordered Media Object.

Left Aligned Media Bordered

Generic placeholder image

Cookie candy

Cookie candy dragée marzipan gingerbread pie pudding. Brownie fruitcake wafer bonbon gummi bears apple pie. Brownie lemon drops chocolate cake donut croissant candy.

Generic placeholder image

Tootsie roll dessert

Tootsie roll dessert tart candy canes ice cream gingerbread cookie. Jelly jelly-o bear claw bear claw halvah. Biscuit icing pastry tootsie roll gingerbread croissant chupa chups.

Generic placeholder image

Lemon drops ice cream

Lemon drops ice cream chocolate cake marzipan ice cream. Gummi bears cotton candy cheesecake tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut.

Bordered Media

Chupa chups candy

Oat cake topping oat cake jelly soufflé donut jelly-o tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut. Chocolate pie croissant gummi bears muffin chocolate.

Generic placeholder image

Chocolate pudding

Jelly chocolate cake lemon drops halvah dragée caramels jelly-o biscuit. Fruitcake jelly beans marzipan sesame snaps.Jelly beans cake chocolate cake gummi bears lollipop.

Generic placeholder image

Cotton candy jelly

Pudding marshmallow cheesecake. Chocolate cake apple pie jelly-o bear claw ice cream sugar plum biscuit. Lemon drops brownie biscuit jelly-o biscuit gummies.

Generic placeholder image
Round Media Object

Add .round-media class to image for round media object.

Left Round Media Objects

Generic placeholder image

Cookie candy

Cookie candy dragée marzipan gingerbread pie pudding. Brownie fruitcake wafer bonbon gummi bears apple pie. Brownie lemon drops chocolate cake donut croissant candy.

Generic placeholder image

Tootsie roll dessert

Tootsie roll dessert tart candy canes ice cream gingerbread cookie. Jelly jelly-o bear claw bear claw halvah. Biscuit icing pastry tootsie roll gingerbread croissant chupa chups.

Generic placeholder image

Lemon drops ice cream

Lemon drops ice cream chocolate cake marzipan ice cream. Gummi bears cotton candy cheesecake tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut.

Right Round Media

Oat cake

Oat cake topping oat cake jelly soufflé donut jelly-o tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut. Chocolate pie croissant gummi bears muffin chocolate.

Generic placeholder image

Jelly chocolate cake

Jelly chocolate cake lemon drops halvah dragée caramels jelly-o biscuit. Fruitcake jelly beans marzipan sesame snaps.Jelly beans cake chocolate cake gummi bears lollipop.

Generic placeholder image

Pudding marshmallow

Pudding marshmallow cheesecake. Chocolate cake apple pie jelly-o bear claw ice cream sugar plum biscuit. Lemon drops brownie biscuit jelly-o biscuit gummies.

Generic placeholder image
Bordered Round Media Object

Wrap media list using .media-bordered class for bordered Media Object.

Bordered Round Media Objects

Generic placeholder image

Cookie candy

Cookie candy dragée marzipan gingerbread pie pudding. Brownie fruitcake wafer bonbon gummi bears apple pie. Brownie lemon drops chocolate cake donut croissant candy.

Generic placeholder image

Tootsie roll dessert

Tootsie roll dessert tart candy canes ice cream gingerbread cookie. Jelly jelly-o bear claw bear claw halvah. Biscuit icing pastry tootsie roll gingerbread croissant chupa chups.

Generic placeholder image

Lemon drops ice cream

Lemon drops ice cream chocolate cake marzipan ice cream. Gummi bears cotton candy cheesecake tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut.

Bordered Round Media With Right Align

Oat cake

Oat cake topping oat cake jelly soufflé donut jelly-o tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut. Chocolate pie croissant gummi bears muffin chocolate.

Generic placeholder image

Jelly chocolate cake

Jelly chocolate cake lemon drops halvah dragée caramels jelly-o biscuit. Fruitcake jelly beans marzipan sesame snaps.Jelly beans cake chocolate cake gummi bears lollipop.

Generic placeholder image

Pudding marshmallow

Pudding marshmallow cheesecake. Chocolate cake apple pie jelly-o bear claw ice cream sugar plum biscuit. Lemon drops brownie biscuit jelly-o biscuit gummies.

Generic placeholder image
Nested Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

Media Aligned Left

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

  • 96x96

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    96x96

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    96x96

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    96x96

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

  • 96x96

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

Media Aligned Right

  • 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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    96x96
    96x96

    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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    96x96
    96x96
  • 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.Candy biscuit sweet roll pudding topping candy canes jujubes lemon drops jelly-o.

    96x96
Media Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.
Now, for vertical align, Top alignment use .align-self-start class. For Middle alignment, use .align-self-center and For Bottom alignment, use .align-self-end with left or right aligned class.

Media Aligned Left

Generic placeholder image

Top Aligned Media

Chocolate bar apple pie lollipop pastry candy canes. Candy soufflé brownie toffee tootsie roll. Brownie lemon drops chocolate cake donut croissant cotton candy ice cream. Cookie caramels brownie carrot cake macaroon brownie pastry. Donut powder croissant tootsie roll cake cupcake. Cake tart icing jelly-o ice cream tootsie roll bear claw toffee brownie. Sugar plum danish muffin gummi bears.

Generic placeholder image

Middle Aligned Media

Dragée topping chocolate dragée icing gingerbread. Ice cream jujubes pie sweet roll sweet roll marshmallow powder. Cotton candy dessert apple pie chocolate cake dessert lemon drops topping gingerbread biscuit. Topping halvah wafer croissant jelly tootsie roll. Candy jujubes gummi bears sweet roll dessert. Apple pie jelly gummies tiramisu macaroon tiramisu oat cake. Apple pie tiramisu cake chocolate cake topping danish sweet apple pie sugar plum.

Generic placeholder image

Bottom Aligned Media

Sweet sesame snaps dragée chocolate tiramisu cotton candy sweet roll bonbon dessert. Chocolate cake tiramisu dragée. Carrot cake pudding marshmallow fruitcake carrot cake. Brownie cupcake bonbon sweet lemon drops. Lollipop danish jelly beans cotton candy marshmallow brownie. Brownie pastry tiramisu candy oat cake tiramisu halvah cookie tart. Cotton candy danish gingerbread powder liquorice.

Right Aligned Media

Top Aligned Media

Gummi bears marshmallow sweet roll. Chocolate bar halvah candy tart tart chocolate tart muffin. Cheesecake chocolate bar gummi bears. Cookie topping chocolate biscuit jujubes. Cheesecake muffin danish candy chocolate sweet roll candy jelly powder. Chocolate marzipan dragée. Biscuit oat cake jelly beans brownie donut ice cream biscuit. Soufflé soufflé dessert cotton candy chupa chups lemon drops.

Generic placeholder image

Middle Aligned Media

Powder jelly topping pastry chocolate icing bonbon powder. Lollipop brownie sugar plum sugar plum carrot cake donut. Pastry sugar plum apple pie sesame snaps. Tart brownie gummi bears pie cheesecake cake. Tootsie roll lemon drops oat cake muffin danish halvah cookie chocolate croissant. Apple pie oat cake liquorice sesame snaps. Jelly-o jelly-o dragée topping. Sugar plum danish muffin gummi bears.

Generic placeholder image

Bottom Aligned Media

Ice cream lemon drops marshmallow sweet carrot cake marshmallow candy macaroon cupcake. Tart carrot cake fruitcake. Marzipan liquorice gummies oat cake. Danish jelly beans dessert sweet roll chupa chups candy canes gummies jujubes soufflé. Cheesecake sweet roll candy muffin halvah dessert candy soufflé. Donut cupcake caramels pastry.Candy carrot cake liquorice chocolate bar gummi bears brownie donut.

Generic placeholder image