Abstract object styles for building various types of components that feature a left or right aligned image alongside textual content.
Left Aligned Media Objects
Wrap your <img> tag inside of .media class to align your image to left. You don't have to add any extra classes to align your text to left.
Cookie candy
Lollipop cotton candy tootsie roll cheesecake carrot cake donut cookie pastry. Caramels jujubes bear claw. Croissant sugar plum icing chocolate bar halvah ice cream donut.
Tootsie roll dessert
Oat cake tiramisu soufflé cotton candy lemon drops gingerbread dessert gummi bears donut. Cake bonbon carrot cake chocolate cake pudding sugar plum sweet roll dragée.
Lemon drops ice cream
Jujubes carrot cake oat cake sugar plum fruitcake macaroon. Jelly cookie lemon drops. Soufflé cupcake macaroon ice cream lemon drops chocolate bar dessert chocolate bar.
Right Aligned Media With Round Images
Use .rounded-circle in your <img> for round image. Use .text-right with .media-body for right aligned text.
Oat cake
Chupa chups fruitcake cookie cookie candy chocolate bar sugar plum marzipan marshmallow. Muffin lollipop macaroon cookie muffin gummi bears tootsie roll gingerbread brownie.
Jelly chocolate cake
Fruitcake danish oat cake cookie. Chupa chups toffee chocolate gingerbread chocolate bar apple pie danish liquorice. Icing cake chupa chups chocolate biscuit gummies.
Pudding marshmallow
Halvah ice cream lemon drops gummi bears cupcake jelly-o cupcake gummies cotton candy. Bear claw donut toffee apple pie. Sweet cake carrot cake donut pastry.
Wrap media list using .media-bordered for bordered Media Object.
Left Aligned Bordered Media
Wrap list of media using .media-bordered for bordered media object.
Cookie candy
Tiramisu lollipop marshmallow ice cream bear claw halvah cupcake pudding apple pie. Fruitcake bonbon muffin chocolate cake donut. Soufflé cupcake bonbon jelly-o.
Tootsie roll dessert
Cotton candy chocolate carrot cake topping pastry icing marshmallow. Chocolate jelly-o chocolate chocolate bar tootsie roll cotton candy carrot cake tootsie roll marzipan.
Lemon drops ice cream
Cotton candy sesame snaps bear claw tootsie roll carrot cake chocolate croissant. Gummies marshmallow halvah chupa chups toffee cupcake dessert pie topping.
Right Aligned Bordered Round Media
Wrap list of media using .media-bordered and .rounded-circle for round and bordered media object.
Oat cake
Biscuit dessert carrot cake tootsie roll dragée apple pie lemon drops sugar plum. Candy halvah pastry gummi bears ice cream liquorice. Cotton candy cotton candy pudding.
Jelly chocolate cake
Soufflé halvah dessert gummi bears cotton candy. Gingerbread cake cupcake cake. Tart chupa chups biscuit chupa chups carrot cake carrot cake cookie tiramisu.
Pudding marshmallow
Candy carrot cake fruitcake jelly donut. Jujubes bear claw soufflé carrot cake jujubes powder apple pie pie muffin. Dragée candy canes danish wafer lollipop pudding.
With a bit of extra markup, you can use media inside media (useful for comment threads or articles lists). Place nested .media within the .media-body of a parent media object.
Left Aligned Nested Media
-
Parent Media
Cupcake fruitcake icing brownie apple pie wafer chupa chups. Oat cake macaroon bear claw powder biscuit tart dragée jelly beans cake. Chocolate jujubes cupcake. Pie liquorice marshmallow candy carrot cake chupa chups.
Nested inside Parent
Cupcake lemon drops carrot cake candy canes topping danish muffin muffin chocolate bar. Cotton candy dragée jelly beans carrot cake chupa chups marshmallow bear claw.
Right Aligned Nested Media
-
Parent Media
Croissant chupa chups bonbon. Chocolate cake liquorice brownie lemon drops tiramisu caramels topping. Chocolate cake tart sweet roll muffin halvah icing. Bear claw halvah pie cake pie gingerbread cotton candy oat cake.
Nested inside Parent
Oat cake macaroon halvah. Apple pie jelly pastry jujubes pie cookie. Gummies sweet roll tart jelly-o. Danish chocolate cake pastry pie tootsie roll oat cake jujubes fruitcake.
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.
Left Aligned Media
Top Aligned Media
Gingerbread croissant danish liquorice. Topping dessert gummi bears gummies powder dragée. Jelly carrot cake caramels topping cake jujubes ice cream caramels. Candy sweet roll icing pudding cupcake jelly beans pastry lemon drops gummi bears. Dessert caramels caramels cookie brownie danish oat cake. Bear claw cheesecake sugar plum jujubes gummi bears cake caramels icing. Biscuit sweet roll sweet carrot cake croissant jujubes danish.
Middle Aligned Media
Liquorice sesame snaps cookie jelly chocolate cake gummies sweet roll. Tiramisu candy canes cake. Brownie cake chupa chups jujubes tart danish gummi bears. Candy pudding sesame snaps pastry bonbon sweet. Sweet donut donut lollipop muffin. Danish lemon drops jelly beans caramels. Jujubes oat cake bonbon. Pie cupcake caramels jelly powder halvah pudding chupa chups. Cheesecake bonbon chupa chups pie icing lemon drops.
Bottom Aligned Media
Bear claw sweet marshmallow jelly. Topping cake powder jujubes biscuit. Cookie tootsie roll macaroon jelly beans. Cookie tiramisu chocolate cake jelly-o jelly halvah. Soufflé candy canes marshmallow. Macaroon lemon drops cheesecake candy marzipan jelly-o marshmallow soufflé. Powder dessert chocolate bar dragée jujubes sesame snaps. Gingerbread cookie cake dragée pudding liquorice. Gummi bears tiramisu chocolate cookie.
Right Aligned Media
Top Aligned Media
Biscuit tart tart powder muffin jelly beans. Jelly apple pie chocolate cake. Cotton candy chocolate cake pie toffee dessert chocolate bar. Apple pie cake sweet danish danish sweet roll biscuit apple pie dragée. Brownie tiramisu jelly beans candy donut jelly-o marzipan. Pudding liquorice cupcake tart lollipop macaroon soufflé chocolate cake caramels. Caramels marshmallow candy canes cake caramels danish cake chocolate cake.
Middle Aligned Media
Pastry sugar plum jelly beans carrot cake halvah lemon drops muffin apple pie. Sesame snaps fruitcake carrot cake soufflé wafer. Marshmallow tootsie roll bear claw pie marshmallow jujubes cheesecake chocolate soufflé. Cookie chocolate candy canes cake tiramisu cotton candy marzipan caramels pie. Dragée gummies chocolate bar powder chocolate candy tootsie roll. Sugar plum pastry soufflé gingerbread muffin.
Bottom Aligned Media
Marshmallow liquorice wafer lollipop apple pie jelly-o jelly soufflé. Cheesecake cupcake gummies brownie pie caramels marshmallow cheesecake. Bonbon candy cupcake liquorice. Sweet roll bear claw pudding lemon drops liquorice liquorice macaroon dragée. Dragée pudding sweet roll soufflé cupcake. Powder gummies pastry bear claw tootsie roll jelly beans candy canes. Sugar plum chocolate cake toffee.
