Source

Kaari

Ka whakaratohia e nga kaari Bootstrap he ipu ihirangi ngawari me te whanui me nga momo rereke me nga whiringa maha.

Mō

Ko te kaari he ipu ihirangi ngawari me te whakawhanui. Kei roto ko nga whiringa mo nga pane me nga hiku, te tini o nga momo ihirangi, nga tae papamuri horopaki, me nga whiringa whakaatu kaha. Mena kei te mohio koe ki a Bootstrap 3, ka whakakapihia e nga kaari o maatau panui tawhito, puna, me nga karakōnui. He rite nga mahi ki era waahanga e waatea ana hei karaehe whakarereke mo nga kaari.

Tauira

Ka hangaia nga kaari me nga tohu iti me nga momo ka taea, engari kei te whakahaere tonu ki te kawe i te tone mana me te whakaritenga. He mea hanga ki te flexbox, he ngawari te whakarite me te uru pai ki etahi atu waahanga Bootstrap. Karekau he margintaunoa, na reira whakamahia nga taputapu mokowhiti ina hiahiatia.

Kei raro nei he tauira o te kaari taketake me nga ihirangi whakauru me te whanui pumau. Karekau he whanui tuturu o nga kaari hei tiimata, no reira ka whakakiia te whanuitanga o tona huānga matua. He ngawari te whakarite me o maatau momo momo rahinga .

100%x180
taitara kāri

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Haere ki tetahi wahi 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Momo ihirangi

Ka tautokohia e nga kaari te maha o nga momo ihirangi, tae atu ki nga whakaahua, nga tuhinga, nga roopu rarangi, nga hononga, me etahi atu. Kei raro nei nga tauira o nga mea e tautokohia ana.

Tinana

Ko te paraka hanga o te kaari ko te .card-body. Whakamahia i nga wa katoa e hiahia ana koe ki tetahi waahanga kapi i roto i te kaari.

He kuputuhi tenei kei roto i te tinana kaari. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Nga taitara, nga tuhinga me nga hononga

Ka whakamahia nga taitara kaari ma te taapiri .card-titleki tetahi <h*>tohu. Waihoki, ka taapirihia nga hononga ka tuu ki te taha o tetahi ki tetahi ma te taapiri .card-linkki tetahi <a>tohu.

Ka whakamahia nga taitararoto ma te taapiri i te tohu .card-subtitleki tetahi <h*>tohu. Mena ka whakauruhia nga taonga .card-titleme nga .card-subtitletaonga ki roto i tetahi .card-bodymea, he pai te hono o te taitara kaari me te taitararoto.

taitara kāri
Taitararoto kāri

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Hononga kaari He hononga ano 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Whakaahua

.card-img-toptuu i te ahua ki runga o te kaari. Ma .card-textte , ka taea te taapiri kupu ki te kaari. Ka .card-texttaea hoki te whakaingoatia nga kupu o roto ki nga tohu HTML paerewa.

Potae whakaahua [100%x180]

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Whakarārangihia ngā rōpū

Waihangahia he rarangi o nga ihirangi ki roto i te kaari me te roopu rarangi ma.

  • Kore noa odio
  • Dapibus ac facilisis in
  • Vestibulum me te eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Kua whakaatuhia
  • Kore noa odio
  • Dapibus ac facilisis in
  • Vestibulum me te eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Totohu kihini

Whakaranuhia me te whakahono i nga momo ihirangi maha hei hanga i te kaari e hiahia ana koe, ka maka ranei nga mea katoa ki reira. Kei raro nei ko nga ahua ahua, poraka, momo tuhinga, me tetahi roopu rarangi—ka takai katoa ki te kaari whanui-whanui.

Potae whakaahua [100%x180]
taitara kāri

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

  • Kore noa odio
  • Dapibus ac facilisis in
  • Vestibulum me te eros
Hononga kaari He hononga ano 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Tāpirihia he pane kōwhiri, hiku rānei ki roto i tētahi kāri.

Kua whakaatuhia
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ka taea te whakaahua nga pane kaari ma te taapiri .card-headerki <h*>nga huānga.

Kua whakaatuhia
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Korero

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Kua whakaatuhia
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi
2 ra ki muri 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Te rahinga

Karekau he kaari ka widthtiimata, no reira ka 100% te whanui ki te kore e kii. Ka taea e koe te whakarereke i te mea e hiahiatia ana me te CSS ritenga, nga karaehe matiti, nga whakaranu Sass matiti, me nga taputapu.

Te whakamahi tohu matiti

Ma te whakamahi i te matiti, takai nga kaari ki nga pou me nga rarangi ka hiahiatia.

Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Te whakamahi taputapu

Whakamahia a maatau ringaringa o nga taputapu rahi e waatea ana ki te whakarite tere i te whanui o te kaari.

taitara kāri

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Pātene
taitara kāri

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Pātene 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Ma te whakamahi i te CSS ritenga

Whakamahia te CSS ritenga i roto i o pepa ahua, hei momo raina ranei hei tautuhi whanui.

Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tirohanga kupu

Ka taea e koe te whakarereke tere i te tirohanga kupu o tetahi kaari—i tona katoa, i nga waahanga motuhake ranei—me o maatau karaehe whakatika kupu .

Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tāpirihia etahi whakaterenga ki te pane o te kaari (paraka ranei) me nga waahanga whakaterenga a Bootstrap .

Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Whakaahua

Kei roto i nga kaari etahi whiringa mo te mahi me nga whakaahua. Whiriwhiria mai i te taapiri i nga "potae atahanga" ki tetahi pito o te kaari, whakakikorua i nga whakaahua me te ihirangi kaari, te whakauru noa ranei i te ahua ki roto i te kaari.

Nga potae whakaahua

He rite ki nga pane me nga hiku, ka taea e nga kaari te whakauru i runga me raro nga "potae whakaahua" - nga whakaahua kei runga, i raro ranei o te kaari.

100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

100%x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

Whakakikorua pikitia

Hurihia he atahanga hei papamuri kaari ka whakakikoruatia te tuhinga o to kaari. I runga i te ahua, ka hiahia pea koe ki etahi atu momo, taputapu taputapu ranei.

100%x270
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Nga momo kaari

Kei roto i nga kaari nga momo whiringa mo te whakarite i o raatau papamuri, taitapa me te tae.

Papamuri me te tae

Whakamahia nga taputapu kuputuhi me te papamuri hei whakarereke i te ahua o te kaari.

Pane
taitara kāri tuatahi

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
taitara kāri tuarua

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
taitara kāri angitu

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Te taitara kāri mōrearea

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Taitara kāri whakatūpato

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Taitara kaari korero

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Te taitara kaari marama

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Te taitara kāri pouri

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga.

Taitapa

Whakamahia nga taputapu taitapa hei huri noa i border-colorte kaari. Kia mahara ka taea e koe te whakatakoto .text-{color}i nga karaehe ki runga i te matua .card, ki tetahi waahanga iti ranei o nga ihirangi o te kaari penei i te whakaaturanga i raro nei.

Pane
taitara kāri tuatahi

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
taitara kāri tuarua

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
taitara kāri angitu

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Te taitara kāri mōrearea

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Taitara kāri whakatūpato

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Taitara kaari korero

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Te taitara kaari marama

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Pane
Te taitara kāri pouri

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins taputapu

Ka taea hoki e koe te huri i nga taitapa i runga i te pane o te kaari me te hiku ina hiahiatia, me te tango ano i a raatau background-colorme te .bg-transparent.

Pane
taitara kāri angitu

Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.

Hiku 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Tahora kaari

I tua atu i te hanga i nga korero i roto i nga kaari, kei roto i a Bootstrap etahi whiringa mo te whakatakoto i nga raupapa kaari. I tenei wa, kaore ano kia aro mai enei whiringa whakatakotoranga .

Nga roopu kaari

Whakamahia nga roopu kaari hei whakaputa i nga kaari hei huānga hono kotahi me nga pou whanui me te teitei. Ka whakamahia display: flex;e nga roopu kaari ki te whakatutuki i o raatau rahinga.

100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

100%x180
taitara kāri

Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.

Whakahoutanga whakamutunga 3 mineti ki muri

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

I te wa e whakamahi ana i nga roopu kaari me nga hiku, ka raina aunoa o raatau ihirangi.

100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri
100%x180
taitara kāri

Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri
100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.

Whakahoutanga whakamutunga 3 mineti ki muri 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Nga papa kaari

Kei te hiahia he huinga o nga kaari whanui me te teitei e rite ana kaore i te piri tetahi ki tetahi? Whakamahia nga papa kaari.

100%x200
taitara kāri

He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

100%x200
taitara kāri

Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

100%x200
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.

Whakahoutanga whakamutunga 3 mineti ki muri

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Pērā i ngā rōpū kāri, ka whakarārangi aunoatia ngā hiku kāri i roto i ngā rahoraho.

100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri
100%x180
taitara kāri

Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri
100%x180
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.

Whakahoutanga whakamutunga 3 mineti ki muri 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Ngā tīwae kāri

Ka taea te whakariterite i nga kaari ki roto i nga pou Masonry -like me te CSS noa ma te takai ki roto .card-columns. Ka hangaia nga kaari me nga taonga CSS columnhei utu mo te flexbox kia maamaa ake te tirohanga. Ka ota nga kaari mai i runga ki raro, maui ki matau.

Mahunga ake! Ka rereke pea to maero me nga pou kaari. Kia kore ai e pakaru nga kaari puta noa i nga pou, me whakanoho ki display: inline-blockte column-break-inside: avoidmea ehara i te otinga matā.

100%x160
Ko te taitara kaari ka takai ki tetahi raina hou

He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna
100%x160
taitara kāri

Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat.

He tangata rongonui i te Taitara Puna
taitara kāri

Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.

Whakahoutanga whakamutunga 3 mineti ki muri

100%x260

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna
taitara kāri

He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.

Whakahoutanga whakamutunga 3 mineti ki muri

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Ka taea hoki te whakaroa me te whakarite i nga pou kaari me etahi waehere taapiri. E whakaatuhia ana i raro nei he toronga o te .card-columnskaraehe e whakamahi ana i te CSS ano e whakamahia ana e matou—nga pou CSS— ki te whakaputa i te huinga o nga taumata whakautu mo te huri i te maha o nga pou.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}