Txartelak

Bootstrap-en txartelek edukiontzi malgu eta hedagarria eskaintzen dute, aldaera eta aukera anitzekin.

Buruz

Txartela edukiontzi malgu eta hedagarria da . Goiburuen eta oinen aukerak, askotariko edukiak, testuinguruko atzeko planoko koloreak eta bistaratzeko aukera indartsuak biltzen ditu. Bootstrap 3 ezagutzen baduzu, txartelek gure panel zaharrak, putzuak eta koadro txikiak ordezkatzen dituzte. Osagai horien antzeko funtzionaltasuna eskuragarri dago txartelen modifikatzaile klase gisa.

Adibidea

Txartelak ahalik eta marka eta estilo gutxienekin eraikitzen dira, baina hala ere kontrol eta pertsonalizazio asko ematen dituzte. Flexbox-ekin eraikita, lerrokatze erraza eskaintzen dute eta Bootstrap-eko beste osagai batzuekin ondo nahasten dute. Ez daukate marginlehenespenez, beraz, erabili tartekatzeko utilitateak behar den moduan.

Jarraian, eduki mistoa eta zabalera finkoa duen oinarrizko txartel baten adibidea dago. Txartelek ez dute zabalera finkorik hasteko, beraz, naturalki beteko dute bere elementu nagusiaren zabalera osoa. Hau erraz pertsonalizatzen da gure tamaina ezberdinekin .

Txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Zoaz nonbait

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Eduki motak

Txartelek askotariko edukiak onartzen dituzte, besteak beste, irudiak, testuak, zerrenda-taldeak, estekak eta abar. Jarraian, onartzen denaren adibideak daude.

Gorputza

Txartel baten eraikuntza-blokea .card-body. Erabili ezazu txartel baten barruan atal betea behar duzun bakoitzean.

Hau txartel baten gorputzeko testu bat da.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Izenburuak, testua eta estekak

Txartelaren izenburuak etiketa .card-titlebati gehituz erabiltzen dira . <h*>Modu berean, estekak gehitzen dira eta bata bestearen ondoan jartzen dira etiketa .card-linkbati gehituz.<a>

Azpitituluak etiketa .card-subtitlebati a gehituz erabiltzen dira . <h*>Elementuak .card-titleeta .card-subtitleelementuak elementu batean jartzen badira .card-body, txartelaren izenburua eta azpititulua ondo lerrokatzen dira.

Txartelaren izenburua

Txartelaren azpititulua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Txartelaren esteka Beste esteka bat

<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>

Irudiak

.card-img-topirudi bat jartzen du txartelaren goialdean. , .card-texttestua gehi dakioke txartelari. Barneko testua .card-textHTML etiketa estandarrekin ere molda daiteke.

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Taldeak zerrenda

Sortu eduki-zerrendak txartel batean zerrenda-talde bat duen.

Cras justo odio
Dapibus ac facilitis in
Vestibulum at 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>

Nabarmena

Cras justo odio
Dapibus ac facilitis in
Vestibulum at 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>

Sukaldeko konketa

Nahastu eta lotu hainbat eduki mota behar duzun txartela sortzeko, edo bota dena bertan. Jarraian irudi-estiloak, blokeak, testu-estiloak eta zerrenda talde bat agertzen dira, guztiak zabalera finkoko txartel batean bilduta.

Txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Cras justo odio
Dapibus ac facilitis in
Vestibulum at eros

Txartelaren esteka Beste esteka bat

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Goiburua eta oina

Gehitu aukerako goiburua eta/edo orri-oina txartel baten barruan.

Nabarmena

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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>

.card-headerTxartel-goiburuak elementuei gehituz estiloa jar daiteke <h*>.

Nabarmena

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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>

Aipatu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

<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>

Nabarmena

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

Duela 2 egun

<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>

Tamaina

Txartelek hasierako zehatzik ez dutela suposatzen widthdute, beraz, % 100eko zabalera izango dute, bestela adierazi ezean. Behar duzunean alda dezakezu CSS pertsonalizatuekin, sareko klaseekin, sareko Sass nahasketarekin edo utilitateekin.

Sare-marka erabiltzea

Sarea erabiliz, bildu txartelak zutabeetan eta errenkadetan behar den moduan.

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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>

Utilitateak erabiltzea

Erabili eskuragarri dauden neurrien erabilgarritasun gutxi txartel baten zabalera azkar ezartzeko.

Txartelaren izenburua

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Botoia

Txartelaren izenburua

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Botoia

<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>

CSS pertsonalizatua erabiliz

Erabili CSS pertsonalizatua zure estilo-orrietan edo lerroko estilo gisa zabalera bat ezartzeko.

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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>

Testuaren lerrokatzea

Edozein txartelen testu-lerrokatzea azkar alda dezakezu (osorik edo zati zehatzetan) gure testu-lerrokatzea klaseekin .

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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>

Gehitu nabigazio pixka bat txartel baten goiburuan (edo blokean) Bootstrap-en nabigazio osagaiekin .

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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="#" tabindex="-1" aria-disabled="true">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>

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait

<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="#" tabindex="-1" aria-disabled="true">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>

Irudiak

Txartelek irudiekin lan egiteko aukera batzuk dituzte. Aukeratu "irudi-txapelak" gehitzea txartel baten muturretan, irudiak txartelaren edukiarekin gainjartzea edo, besterik gabe, irudia txartel batean txertatzea.

Irudi-txapelak

Goiburuen eta oinen antzera, txartelek goiko eta beheko "irudi-txapelak" izan ditzakete, txartel baten goiko edo beheko irudiak.

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <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 src="..." class="card-img-top" alt="...">
</div>

Irudien gainjartzeak

Bihurtu irudi bat txartelaren atzeko planoan eta gainjarri zure txartelaren testua. Irudiaren arabera, baliteke estilo edo utilitate gehigarriak behar izatea edo ez.

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <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>

Kontuan izan edukiak ez duela irudiaren altuera baino handiagoa izan behar. Edukia irudia baino handiagoa bada, edukia iruditik kanpo bistaratuko da.

Horizontala

Sarearen eta erabilgarritasun-klaseen konbinazioa erabiliz, txartelak horizontalean egin daitezke mugikorretarako eta erantzuteko moduan. Beheko adibidean, sareko erretenak kendu .no-gutterseta klaseak erabiltzen .col-md-*ditugu txartela mdeten puntuan horizontala izateko. Baliteke doikuntza gehiago behar izatea txartelaren edukiaren arabera.

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <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>
</div>

Txartel estiloak

Txartelek hainbat aukera dituzte atzeko planoak, ertzak eta koloreak pertsonalizatzeko.

Hondoa eta kolorea

Erabili testu eta atzeko tresnak txartel baten itxura aldatzeko.

Goiburua

Txartelaren titulu nagusia

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Bigarren txartelaren titulua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Arrakasta txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Arrisku txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Abisu txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Informazio txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Txartel argiaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Txartel ilunaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

<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>

Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria.

Muga

Erabili ertz-utilitateakborder-color txartel baten aldea soilik aldatzeko . Kontuan izan klaseak jarri ditzakezula .text-{color}gurasoari .cardedo txartelaren edukiaren azpimultzo batean behean erakusten den moduan.

Goiburua

Txartelaren titulu nagusia

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Bigarren txartelaren titulua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Arrakasta txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Arrisku txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Abisu txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Informazio txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Txartel argiaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua

Txartel ilunaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

<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 utilitateak

Txartelaren goiburuko eta orri-oineko ertzak ere alda ditzakezu behar izanez gero, eta baita horiek kendu background-colorere .bg-transparent.

Goiburua

Arrakasta txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Oina

<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>

Txartelaren diseinua

Txartelen edukia diseinatzeaz gain, Bootstrap-ek txartel-serieak jartzeko aukera batzuk ditu. Momentuz, diseinu-aukera hauek ez dira oraindik erantzuten .

Txartel taldeak

Erabili txartel-taldeak txartelak errendatzeko, zabalera eta altuera berdineko zutabeekin erantsitako elementu bakar gisa. Txartel-taldeek display: flex;beren tamaina uniformea lortzeko erabiltzen dute.

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Oin-oinak dituzten txartel-taldeak erabiltzean, haien edukia automatikoki lerrokatuko da.

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Karta sortak

Elkarri lotuta ez dauden zabalera eta altuera berdineko karta-multzo bat behar duzu? Erabili karta sortak.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Txartel taldeekin bezala, sortaetako karta-oinak automatikoki lerrokatuko dira.

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Sare-txartelak

Erabili Bootstrap sare-sistema eta bere .row-colsklaseak errenkada bakoitzeko zenbat sare-zutabe (zure txartelen inguruan bilduta) erakusten dituzun kontrolatzeko. Adibidez, hona hemen .row-cols-1txartelak zutabe batean finkatzea eta .row-cols-md-2lau karta banatzen ditu hainbat errenkadatan zabalera berdinean, eten puntu ertainetik gora.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Aldatu .row-cols-3eta laugarren txartela ikusiko duzu.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Altuera berdina behar duzunean, gehitu .h-100kartetara. $card-height: 100%Lehenespenez altuera berdina nahi baduzu, Sass-en ezar dezakezu .

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Txartelaren izenburua

Hau txartel laburra da.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.

Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Txartel-zutabeak

Txartelak Masonry -antzeko zutabeetan antola daitezke CSS besterik gabe, ontzietan bilduta .card-columns. Txartelak CSS columnpropietateekin eraikitzen dira, flexbox-en ordez, lerrokatzea errazteko. Txartelak goitik behera eta ezkerretik eskuinera ordenatzen dira.

Buruak gora! Baliteke txartelaren zutabeekin egiten duzun kilometrajea aldatzea. Txartelak zutabeetan zehar hautsi ez daitezen, oraindik balen aurkako irtenbidea ez den display: inline-blockmoduan ezarri behar ditugu.column-break-inside: avoid

Lerro berri batera biltzen duen txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Iturria Tituluan ospetsua den norbait

Txartelaren izenburua

Txartel honek izenburu arrunta eta azpian testuaren paragrafo laburra ditu.

Duela 3 minutu azken eguneratzea

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

Txartelaren izenburua

Hau behean izenburua eta testu osagarria dituen beste txartel bat da. Txartel honek eduki gehigarri bat du, orokorrean apur bat altuagoa izan dadin.

Duela 3 minutu azken eguneratzea

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 text-white">
        <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 a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Txartelaren zutabeak ere zabaldu eta pertsonaliza daitezke kode gehigarri batekin. Behean erakusten dugu .card-columnsklasearen luzapen bat erabiltzen dugun CSS bera erabiliz —CSS zutabeak— zutabe kopurua aldatzeko maila sentikorren multzo bat sortzeko.

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

Txartelak

Buruz

Adibidea

Txartelaren izenburua

Eduki motak

Gorputza

Izenburuak, testua eta estekak

Txartelaren izenburua

Txartelaren azpititulua

Irudiak

Taldeak zerrenda

Sukaldeko konketa

Txartelaren izenburua

Goiburua eta oina

Tituluaren tratamendu berezia

Nabarmena

Tituluaren tratamendu berezia

Tituluaren tratamendu berezia

Tamaina

Sare-marka erabiltzea

Tituluaren tratamendu berezia

Tituluaren tratamendu berezia

Utilitateak erabiltzea

Txartelaren izenburua

Txartelaren izenburua

CSS pertsonalizatua erabiliz

Tituluaren tratamendu berezia

Testuaren lerrokatzea

Tituluaren tratamendu berezia

Tituluaren tratamendu berezia

Tituluaren tratamendu berezia

Nabigazioa

Tituluaren tratamendu berezia

Tituluaren tratamendu berezia

Irudiak

Irudi-txapelak

Txartelaren izenburua

Txartelaren izenburua

Irudien gainjartzeak

Txartelaren izenburua

Horizontala

Txartelaren izenburua

Txartel estiloak

Hondoa eta kolorea

Txartelaren titulu nagusia

Bigarren txartelaren titulua

Arrakasta txartelaren izenburua

Arrisku txartelaren izenburua

Abisu txartelaren izenburua

Informazio txartelaren izenburua

Txartel argiaren izenburua

Txartel ilunaren izenburua

Laguntza-teknologiei esanahia ematea

Muga

Txartelaren titulu nagusia

Bigarren txartelaren titulua

Arrakasta txartelaren izenburua

Arrisku txartelaren izenburua

Abisu txartelaren izenburua

Informazio txartelaren izenburua

Txartel argiaren izenburua

Txartel ilunaren izenburua

Mixins utilitateak

Arrakasta txartelaren izenburua

Txartelaren diseinua

Txartel taldeak

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Karta sortak

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Txartelaren izenburua

Sare-txartelak