Media thil tum a ni
Bootstrap-a media object-in blog comment, tweet leh a dangte ang chi component repetitive tak tak siam theihna tur documentation leh entirnan.
Entirna
Media object hian complex leh repetitive component siamnaah a pui a, chutah chuan media thenkhat chu said media-a wrap lo content bulah dah a ni. Plus, flexbox vangin class mamawh pahnih chauh hmangin hetiang hi a ti bawk.
A hnuaia media object pakhat entir nan kan rawn tarlang e. Class pahnih chauh a ngai a ni— i thupui wrapping .media
leh a chhehvel. .media-body
Optional padding leh margin hi spacing utilities hmangin control theih a ni .
Media heading a ni
Ka tan pawh chutiang bawk chuan i ti ve dawn em ni? Music hmachhawn hun a ni tawh I muse ka ni tawh lo. Heard it's beautiful, judge ni la ka fanute chuan vote an la dawn a ni. Ka chhungah hian phoenix a awm tih ka hre thei. Vanin kan hmangaihna hi a thik a, chunglam atangin vantirhkohte an tap a. Yeah, utopia ah min hruai a.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</div>
</div>
Flexbug #12: Inline elements hi flex item anga ngaih a ni lo
Internet Explorer 10-11 hian inline elements link emaw image (or ::before
leh ::after
pseudo-elements) ang chi te chu flex item angin a render lo. Workaround awm chhun chu non-inline display
value (eg, block
, inline-block
, or flex
) set hi a ni. Kan display utility.d-flex
zinga pakhat , chu awlsam taka siamthatna atan hman kan rawt a ni.
Thu lakna: GitHub-a Flexbugs
Nesting tih a ni
Media object te chu infinitely nest theih a ni a, mahse engtik lai pawhin chawlhsan turin kan rawt a che. Parent media object .media
chhungah nested dah rawh ..media-body
Media heading a ni
Bomb tlak tan tirh laia hmatawnga ding. Vanin kan hmangaihna hi a thik a, chunglam atangin vantirhkohte an tap a. Ring maktaduai khat nen a thlak thei lo che. Tlangval, ka bula i awm hunah chuan ka taste ka pe ang che. Hnung leh tur a awm tawh lo. Min hmuh hma khan ka alright mahse thil a rit deuh. Lullukhum khumtu lu chu a rit a ni.
Media heading a ni
Hmangaihte chibai ka buk a che u. Ni e, vântirhkohte kan ṭap a, chung lam aṭangin leiah ruah a sur ṭhin. Lawm tur thil tha pe rawh. Ka lei ka seh thin a, ka thaw ka chelh tlat thin. Ka vun tight jeans ah hian i thinlung a na hle mai. Beat danglam takah keimah chauha ka march lai chuan. High school zawh hnua kan inhmuh hmasak ber ṭum khan summer. I hypnotizing em em a, Diabola i ni thei ang em? Vantirhkoh i ni thei ang em? Balloon lian tak tak rawn chhuah chhuah a hun tawh. Keimah chu exception ka ni tih a ngaihtuah a. Bikini, zucchini, Martinis, weenies awm lo.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>
Alignment tih a ni
Media object chhunga media chu flexbox utilities nen i .media-body
content chunglam (default), laihawl, emaw tawp lamah emaw a inmil thei a ni.
Top-aligned media te pawh a awm
Coma ah ka dah dawn nia. A chhan za tam tak i pe a, i tum tak tak dawn tih i sawi bawk. Chuvang chuan ngawi rengin ka thu a, zahawm takin ka remti a. Ka lallukhum khumna indona atan chuan a suiting up. Tin, ka Birthday vawi 18-naah chuan matching tattoo kan nei bawk. So très chic, yeah, a classic hle mai. Kawngpui less travelled tur chuan ka inpeih tawh.
Air-ah ka kal a (zanin hian). Mahse, leiah chuan. Original i ni a, thlak theih a ni lo. Mahse nun dangah chuan i nula ka ni ngei ang. Cali lam pan chuan kan tlan a, tuipui kamah chuan kan rui ta a. Kan zai thei, kan thih thlengin, nang leh kei, kumkhuain kan la naupang ang. Khawpui chhungah Blues hla sak lai ka hmu a.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>
Center lam hawi media te
Freezer angin a lum ang. A eh-end zawng zawngah. Bee ang maia stinging ka stripes ka hlawh chhuak. Bikini, zucchini, Martinis, weenies awm lo. Appetite hrisel tak i neih ka beisei. Kan zai thei, kan thih thlengin, nang leh kei, kumkhuain kan la naupang ang. Nun kan hmang mek a ni. Kan ti dik a ni. Kawngpuiah thumal, min hmuhtir tur thil i nei a, keimah.
3D-a show en duh tan, movie a ni. An ti a, midang ang i ni lo tih hlau rawh, futuristic lover. I thinlung kha hawng rawh. Chuvang chuan ngawi rengin ka thu a, zahawm takin ka remti a. Nikum Friday zan khan. Yeah, a thlawhnaah i awm a nih chuan i vannei hle. I thilpek ka ni ang, lawmna tur thil tha ka pe ang che.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>
Bottom-aligned media a awm bawk
Lo kal rawh, i rawng te chu puak darh rawh se. He ka chhunga êng awm hi ka hre thei. Zankhuain an play a, i hla. Tokyo atanga Mexico thlengin, Rio thlengin. Hnung leh tur a awm tawh lo. Mahse, leiah chuan. Magical, rawng hrang hranga chei, Mr. Mystery, ee. DNA hrang hrang, an hrethiam lo che.
Mahse, leiah chuan. Chu chu a nei a ni, je ne sais quoi, i hria em? Bang chunga thuziak chu ka hmu thei. Tlangvalte chuan an kawng an tikehsawm try'na to creep a little sneak peek. Min hruai la, ta-ta-min la rawh. I thinlung kha hawng rawh. Keimah chu exception ka ni tih a ngaihtuah a. Boom, boom, boom tih te hi a ni. Venice beach leh Palm Springs, thlasik lai hian engkim a ni. Beat chu rawn keng leh rawh. (Hei hi kan tih dan a ni)
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
</div>
</div>
Thupek
Media object-a thu awm dan tur chu HTML ngei pawh siam danglamin, a nih loh leh custom flexbox CSS engemaw zat dah belhin order
property chu (i duh ang integer-ah) thlak la.
Media thil tum a ni
Inthawina a awm dawn tih ka hria mahse chu chu a man a ni. I peacock chu min hmuh tir turin i huaisen em? Zanin hian i tleirawl mumang ni rawh. Uh-huh, ka hmu che. Hnung leh tur a awm tawh lo. Yeah, kan credit card te chu kan max a, bar atangin kan hnawtchhuak ta a ni. Chuvangin i birthday suit ka ha ang che. Amah i hmuh hunah i inhmangaih phah mai thei. Khawvel hi i kutphahah a nei a. Ropuina hian tihtluk tir suh ang che, oh, oh yeah. Tunah chuan kan sawi astrology, kan nails tih, Japanese-y zawng zawng. I Aphrodite min siam rawh.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</div>
<img src="..." class="ml-3" alt="...">
</div>
Media list a ni
Media object hian structural requirement a neih tlem em avangin list HTML elements ah pawh heng class te hi i hmang thei bawk. I <ul>
or -ah chuan browser default list style eng pawh paih chhuak turin <ol>
add la , chutah chuan i s-ah apply rawh. A hma ang bawkin, a tulna apiangah spacing utilities hmangin fine tune rawh..list-unstyled
.media
<li>
-
List-a innghat media object
Ka hmeichhe naupang zawng zawng vintage Chanel baby. Chuvangin i cake chu i nei thei ang. Zanin, zanin, zanin hian boruakah ka kal a. Zawi zawiin ka hlauhna chu a rawn lem thla a, yeah yeah. Lightning bolt-ah a lo thang chak hle. Chutiang khawpa lum leh rit, ‘Til dawn. Chu thawnthu tawp chu knight in shining armor nen a tawp ta a ni. Lullukhum khumtu lu chu a rit a ni.
-
List-a innghat media object
Kawngkhar zawng zawng khar vek chhan pawh a ni mai thei. Cause vawi khat chu ka ta i ni a, vawi khat chu ka ta i ni. Zanin hian i tleirawl mumang ni rawh. Lullukhum khumtu lu chu a rit a ni. Chawlhni pawh a ni lo, lawmna tur engmah a ni lo. Thlipui famkim, thlipui famkim.
-
List-a innghat media object
I peacock chu min hmuh tir turin i huaisen em? Hnung leh tur a awm tawh lo. Hei hi i sawi hnuhnung ber a ni a, line hnuhnung ber i break hnuah. A eh-end zawng zawngah.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>