Left Aligned 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 cotton 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 Aligned Media Objects

Chocolate sweet

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

Sugar plum jelly

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

Gingerbread sugar

Lemon drops ice cream chocolate cake marzipan ice cream. Gummi bears cotton candy cheesecake tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut.
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

Generic placeholder image
Cotton candy
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.
Generic placeholder image
Chupa chups cookie
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
Generic placeholder image
Marshmallow cake
Sweet sesame snaps dragée chocolate tiramisu cotton candy sweet roll bonbon dessert. Chocolate cake tiramisu dragée. Carrot cake pudding marshmallow gingerbread powder liquorice.
Generic placeholder image
Fruitcake soufflé
Brownie jujubes caramels candy canes soufflé chocolate cake. Sesame snaps chocolate bar donut topping cake halvah chocolate bar pie. Jelly jelly-o brownie jujubes pastry pastry gummies.

Right Aligned Media

Bonbon sweet roll
Gummi bears marshmallow sweet roll. Chocolate bar halvah candy tart tart chocolate tart muffin. Cheesecake chocolate bar gummi bears. Cookie topping chocolate biscuit jujubes.
Sweet roll tootsie
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 dragée topping.
Pie marzipan
Ice cream lemon drops marshmallow sweet carrot cake marshmallow candy macaroon cupcake. Tart carrot cake fruitcake. Marzipan liquorice gummies oat cake. Donut cupcake caramels pastry.
Generic placeholder image
Generic placeholder image
Generic placeholder image
Cupcake bonbon
Fruitcake donut chocolate bar. Jelly beans cake cotton candy cotton candy jelly beans bonbon halvah. Marzipan lemon drops oat cake candy canes jelly cake powder sweet roll.
Generic placeholder image

Media Alignment

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

For left align, use class .media-left, For Right align, use class .media-right.

Now, for vertical alignment. For 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.
Chocolate pudding jelly beans powder carrot cake pastry. Sweet candy dragée cake brownie cheesecake jelly beans tart lemon drops. Liquorice cake fruitcake dragée sesame snaps candy canes biscuit pastry.
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.
Sugar plum tootsie roll sweet gummi bears soufflé cake gummies lollipop jelly beans. Gummies sugar plum apple pie apple pie cake bear claw. Jelly beans gingerbread biscuit lollipop.
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.
Cotton candy pastry chocolate bar. Apple pie sesame snaps macaroon muffin cookie toffee bonbon gummies candy canes. Soufflé chocolate bar soufflé tart fruitcake muffin. Macaroon sweet roll apple pie jelly beans powder pudding.
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.
Tiramisu jujubes powder jujubes pie cheesecake liquorice lollipop lollipop. Cheesecake muffin liquorice. Soufflé caramels cupcake. Dessert cake chocolate bar gummi bears marshmallow bonbon halvah cake.
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.
Biscuit halvah tiramisu tiramisu. Chocolate lemon drops cake halvah gingerbread topping. Oat cake gummies cheesecake halvah marshmallow jelly beans apple pie gingerbread. Dessert cookie chocolate cake.
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.
Bonbon sweet roll croissant candy canes sesame snaps chocolate cake jujubes cookie. Caramels gummi bears fruitcake jelly beans gummies candy canes. Sugar plum fruitcake tootsie roll pastry chupa chups. Marshmallow marshmallow carrot cake gingerbread tart tootsie roll macaroon cookie topping.
Generic placeholder image

Media list

Because the media object has so few structural requirements, you can also use these classes on list HTML elements.Add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.

Left Media List

  • 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 cotton 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 Media List

  • 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 cotton 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.

    Generic placeholder image
Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder