Source

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 .medialeh a chhehvel. .media-bodyOptional padding leh margin hi spacing utilities hmangin control theih a ni .

Placeholder 64x64
Media heading a ni
Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a. 
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </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 ::beforeleh ::afterpseudo-elements) ang chi te chu flex item angin a render lo. Workaround awm chhun chu non-inline displayvalue (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 .mediachhungah nested dah rawh ..media-body

Placeholder 64x64
Media heading a ni
Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.
Placeholder 64x64
Media heading a ni
Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a. 
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Alignment tih a ni

Media object chhunga media chu flexbox utilities nen i .media-bodycontent chunglam (default), laihawl, emaw tawp lamah emaw a inmil thei a ni.

Placeholder 64x64
Top-aligned media te pawh a awm

Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.

Donec sed odio dui. A rilru a buai em em a, a rilru a hah em em bawk a. Nullam quis risus eget urna mollis ornare vel eu leo. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Center lam hawi media te

Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.

Donec sed odio dui. A rilru a buai em em a, a rilru a hah em em bawk a. Nullam quis risus eget urna mollis ornare vel eu leo. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Bottom-aligned media a awm bawk

Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.

Donec sed odio dui. A rilru a buai em em a, a rilru a hah em em bawk a. Nullam quis risus eget urna mollis ornare vel eu leo. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</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 orderproperty chu (i duh ang integer-ah) thlak la.

Media thil tum a ni
Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.
Placeholder 64x64 
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </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>

  • Placeholder 64x64
    List-a innghat media object
    Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.
  • Placeholder 64x64
    List-a innghat media object
    Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a.
  • Placeholder 64x64
    List-a innghat media object
    Cras thu amet nibh libero, in gravida nulla. A rilru a buai em em a, a rilru a hah em em bawk a. Nulla vel metus scelerisque ante sollicitudin. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vulputate at, tempus viverra turpis. A rilru a buai em em a, a rilru a hah em em bawk a. vulputate fringilla. Faucibus-ah hian Donec lacinia congue felis a awm a. 
<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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>