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 tarlan te hi media object pakhat entir nan a ni. 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 .

64x64 a ni
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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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

64x64 a ni
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.
64x64 a ni
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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </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.

64x64 a ni
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 class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>
64x64 a ni
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 class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>
64x64 a ni
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 class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <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.
64x64 a ni 
<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 class="ml-3" src=".../64x64" alt="Generic placeholder image">
</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>

  • 64x64 a ni
    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.
  • 64x64 a ni
    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.
  • 64x64 a ni
    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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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>