Default Media Object
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
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.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 chocolate.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.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 chocolate.Bordered Media Object
Wrap media list using .media-bordered
class for bordered
Media Object.
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.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 chocolate.Media Object with Header
Use class .media-head
inside .media
class.
Header Section
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.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.Another Header Section
Header Section
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 chocolate.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.Another Header Section
Round Media Object
Add .rounded-circle
class to image for round media object.
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.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 chocolate.Bordered Round Media Object
Wrap media list using .media-bordered
class for bordered
Media Object.
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.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 chocolate.Round Media Object with Header
Use class .media-head
inside .media
class.
Header Section
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.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.Another Header
Heading Section
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 chocolate.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.Another Heading
Media Title Options
Find different options for media title.
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.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 chocolate.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.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.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.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 chocolate.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.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.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.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.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.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 chocolate.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.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.Media Text Option
Use class .text-muted
for muted media text.
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.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.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.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 chocolate.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.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.Linked Media List
Wrap .media
with .media-linked
and use <a>
tag which contains .media-link
to wrap image, title
& text.
Header Section
Another Header
Header Section
Another Header
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.
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.
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.
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.
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.
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.
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.
Nested Media List
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
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.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.Media Object with Notation Text
Add some custom text to media body. This text can be date, time, any short info, notification, etc.
Cookie candy 2 weeks ago
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.Tootsie roll dessert Yesterday, 12:00 pm
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.Lemon drops ice cream 2 days ago
Lemon drops ice cream chocolate cake marzipan ice cream. Gummi bears cotton candy cheesecake tootsie roll. Candy sweet cake. Tiramisu cookie toffee donut.Oat cake 1 week ago, 6:20 pm
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 chocolate.Jelly chocolate cake 3 hours ago
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.Pudding marshmallow Yesterday, 11:10 am
Pudding marshmallow cheesecake. Chocolate cake apple pie jelly-o bear claw ice cream sugar plum biscuit. Lemon drops brownie biscuit jelly-o biscuit gummies.Cookie candy
Tootsie roll dessert
Lemon drops ice cream
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 chocolate.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.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.More Examples
Some more examples using media objects to know how to use it.