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.
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.
Left Media With Right Text
Use .text-right
class to the content.
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.
Right media With Right Text
Use .text-right
to 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.
Wrap media list using .media-bordered
class for bordered Media Object.
Left Aligned Media Bordered
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.
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.
Add .round-media
class to image for round media object.
Left Round Media Objects
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.
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.
Wrap media list using .media-bordered
class for bordered Media Object.
Bordered Round Media Objects
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.
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.
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).
-
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.
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.
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
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.
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.
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.
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.
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.