Kartat

Kartat e Bootstrap ofrojnë një kontejnerë përmbajtjeje fleksibël dhe të zgjerueshëm me variante dhe opsione të shumta.

Rreth

Një kartë është një kontejner përmbajtje fleksibël dhe i zgjerueshëm. Ai përfshin opsione për titujt dhe fundet, një shumëllojshmëri të gjerë të përmbajtjes, ngjyrat kontekstuale të sfondit dhe opsionet e fuqishme të ekranit. Nëse jeni njohur me Bootstrap 3, kartat zëvendësojnë panelet, pusetat dhe miniaturat tona të vjetra. Funksionalitet i ngjashëm me këta komponentë është i disponueshëm si klasa modifikuese për kartat.

Shembull

Kartat janë ndërtuar me sa më pak shënime dhe stile të jetë e mundur, por megjithatë arrijnë të ofrojnë një ton kontrolli dhe personalizimi. Të ndërtuara me flexbox, ato ofrojnë shtrirje të lehtë dhe përzihen mirë me komponentët e tjerë të Bootstrap. Ata nuk kanë marginsi parazgjedhje, kështu që përdorni shërbimet e ndarjes sipas nevojës.

Më poshtë është një shembull i një karte bazë me përmbajtje të përzier dhe një gjerësi fikse. Kartat nuk kanë gjerësi fikse për të filluar, kështu që ato do të mbushin natyrshëm gjerësinë e plotë të elementit të tyre prind. Kjo përshtatet lehtësisht me opsionet tona të ndryshme të përmasave .

Titulli i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Shko diku

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

Llojet e përmbajtjes

Kartat mbështesin një shumëllojshmëri të gjerë të përmbajtjes, duke përfshirë imazhet, tekstin, grupet e listave, lidhjet dhe më shumë. Më poshtë janë shembuj të asaj që mbështetet.

Trupi

Blloku i ndërtimit të një karte është .card-body. Përdoreni sa herë që keni nevojë për një seksion të mbushur brenda një karte.

Ky është një tekst brenda trupit të kartës.

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

Titujt, teksti dhe lidhjet

Titujt e kartave përdoren duke shtuar .card-titlenë një <h*>etiketë. Në të njëjtën mënyrë, lidhjet shtohen dhe vendosen pranë njëra-tjetrës duke shtuar .card-linknë një <a>etiketë.

Titrat përdoren duke shtuar një .card-subtitlenë një <h*>etiketë. Nëse .card-titledhe .card-subtitleartikujt vendosen në një .card-bodyartikull, titulli dhe titrat e kartës janë të rreshtuara mirë.

Titulli i kartës

Titrat e kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Lidhja e kartës Një lidhje tjetër

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

Imazhet

.card-img-topvendos një imazh në krye të kartës. Me .card-text, teksti mund të shtohet në kartë. Teksti brenda .card-textmund të stilohet edhe me etiketat standarde HTML.

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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

Listoni grupet

Krijoni lista të përmbajtjes në një kartë me një grup të listave të rrafshuara.

Cras justo odio
Lehtësimi i AC në
Vestibulum dhe 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>

Të paraqitura

Cras justo odio
Lehtësimi i AC në
Vestibulum dhe 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>

Lavaman kuzhine

Përzieni dhe përputhni shumë lloje të përmbajtjes për të krijuar kartën që ju nevojitet, ose hidhni gjithçka aty. Më poshtë tregohen stilet e imazhit, blloqet, stilet e tekstit dhe një grup liste—të gjitha të mbështjella në një kartë me gjerësi fikse.

Titulli i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Cras justo odio
Lehtësimi i AC në
Vestibulum dhe eros

Lidhja e kartës Një lidhje tjetër

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

Koka dhe fundi

Shtoni një kokë dhe/ose fund të faqes opsionale brenda një karte.

Të paraqitura

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Titujt e kartave mund të stilohen duke i shtuar .card-headerelementeve <h*>.

Të paraqitura

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Citim

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit

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

Të paraqitura

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

2 dite me pare

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

Përmasat

Kartat nuk supozojnë se nuk janë të veçanta widthpër të filluar, kështu që ato do të jenë 100% të gjera nëse nuk përcaktohet ndryshe. Ju mund ta ndryshoni këtë sipas nevojës me CSS të personalizuar, klasat e rrjetit, përzierjet e rrjetit Sass ose shërbimet.

Përdorimi i shënjimit në rrjet

Duke përdorur rrjetën, mbështillni kartat në kolona dhe rreshta sipas nevojës.

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Përdorimi i shërbimeve

Përdorni një pjesë të vogël të shërbimeve tona të disponueshme për madhësinë për të vendosur shpejt gjerësinë e një karte.

Titulli i kartës

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Butoni

Titulli i kartës

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Butoni

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

Duke përdorur CSS të personalizuar

Përdorni CSS të personalizuar në fletët e stilit tuaj ose si stile të brendshme për të vendosur një gjerësi.

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Rreshtimi i tekstit

Mund të ndryshoni shpejt shtrirjen e tekstit të çdo karte—në tërësinë e saj ose pjesë të veçanta—me klasat tona të rreshtimit të tekstit .

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Shtoni pak navigim në kokën (ose bllokun) e një karte me komponentët navigues të Bootstrap .

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku

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

Imazhet

Kartat përfshijnë disa opsione për të punuar me imazhe. Zgjidhni nga shtimi i "tapave të imazhit" në të dy skajet e një karte, duke mbivendosur imazhet me përmbajtjen e kartës ose thjesht duke futur imazhin në një kartë.

Kapelet e imazhit

Ngjashëm me titujt dhe fundet, kartat mund të përfshijnë "kapakët e imazhit" të sipërm dhe të poshtëm - imazhe në krye ose në fund të një karte.

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

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

Mbivendosjet e imazhit

Kthejeni një imazh në një sfond karte dhe mbivendosni tekstin e kartës suaj. Në varësi të imazhit, mund ose nuk mund të keni nevojë për stile ose shërbime shtesë.

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

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

Stilet e kartave

Kartat përfshijnë opsione të ndryshme për personalizimin e sfondeve, kufijve dhe ngjyrës së tyre.

Sfondi dhe ngjyra

Përdorni programet e tekstit dhe sfondit për të ndryshuar pamjen e një karte.

Kreu

Titulli kryesor i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës dytësore

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së suksesit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së rrezikut

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës paralajmëruese

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së informacionit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së lehtë

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së errët

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Kufiri

Përdorni shërbimet kufitare për të ndryshuar vetëm border-colorkartën. Vini re se mund të vendosni .text-{color}klasa në prind .cardose një nëngrup të përmbajtjes së kartës siç tregohet më poshtë.

Kreu

Titulli kryesor i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës dytësore

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së suksesit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së rrezikut

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës paralajmëruese

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së informacionit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së lehtë

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu

Titulli i kartës së errët

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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

Përzien shërbimet komunale

Ju gjithashtu mund të ndryshoni kufijtë në kokën dhe fundin e kartës sipas nevojës dhe madje t'i hiqni ato background-colorme .bg-transparent.

Kreu

Titulli i kartës së suksesit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Fundi i faqes

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

Paraqitja e kartës

Përveç stilimit të përmbajtjes brenda kartave, Bootstrap përfshin disa opsione për vendosjen e serive të kartave. Për momentin, këto opsione të paraqitjes nuk janë ende të përgjegjshme .

Grupet e kartave

Përdorni grupet e kartave për t'i paraqitur kartat si një element të vetëm, të bashkangjitur me kolona të barabarta gjerësi dhe lartësi. Grupet e kartave përdorin display: flex;për të arritur madhësinë e tyre uniforme.

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.

Përditësimi i fundit 3 minuta më parë

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

Kur përdorni grupet e kartave me funde, përmbajtja e tyre do të rreshtohet automatikisht.

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Përditësimi i fundit 3 minuta më parë

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

Kuvertë letrash

Keni nevojë për një grup letrash me gjerësi dhe lartësi të barabartë që nuk janë ngjitur me njëra-tjetrën? Përdorni kuvertën e kartave.

Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Përditësimi i fundit 3 minuta më parë

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

Ashtu si me grupet e kartave, fundet e letrave në kuvertë do të rreshtohen automatikisht.

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Përditësimi i fundit 3 minuta më parë

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

Kolonat e kartave

Kartat mund të organizohen në kolona të ngjashme me Masonerinë.card-columns vetëm me CSS duke i mbështjellë në . Kartat janë ndërtuar me columnvetitë CSS në vend të flexbox për shtrirje më të lehtë. Kartat renditen nga lart poshtë dhe nga e majta në të djathtë.

Kokat lart! kilometrazhi juaj me kolonat e kartës mund të ndryshojë. Për të parandaluar thyerjen e kartave nëpër kolona, ne duhet t'i vendosim ato në atë që display: inline-blocknuk column-break-inside: avoidështë ende një zgjidhje antiplumb.

Titulli i kartës që përfundon në një rresht të ri

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit

Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat.

Dikush i famshëm në Titullin e Burimit

Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit

Titulli i kartës

Përditësimi i fundit 3 minuta më parë

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

Kolonat e kartës gjithashtu mund të zgjerohen dhe personalizohen me disa kode shtesë. Më poshtë është një shtrirje e .card-columnsklasës duke përdorur të njëjtën CSS që ne përdorim - kolonat CSS - për të gjeneruar një grup nivelesh të përgjegjshme për ndryshimin e numrit të kolonave.

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

Kartat

Rreth

Shembull

Titulli i kartës

Llojet e përmbajtjes

Trupi

Titujt, teksti dhe lidhjet

Titulli i kartës

Titrat e kartës

Imazhet

Listoni grupet

Lavaman kuzhine

Titulli i kartës

Koka dhe fundi

Trajtim special i titullit

Të paraqitura

Trajtim special i titullit

Trajtim special i titullit

Përmasat

Përdorimi i shënjimit në rrjet

Trajtim special i titullit

Trajtim special i titullit

Përdorimi i shërbimeve

Titulli i kartës

Titulli i kartës

Duke përdorur CSS të personalizuar

Trajtim special i titullit

Rreshtimi i tekstit

Trajtim special i titullit

Trajtim special i titullit

Trajtim special i titullit

Navigimi

Trajtim special i titullit

Trajtim special i titullit

Imazhet

Kapelet e imazhit

Titulli i kartës

Titulli i kartës

Mbivendosjet e imazhit

Titulli i kartës

Stilet e kartave

Sfondi dhe ngjyra

Titulli kryesor i kartës

Titulli i kartës dytësore

Titulli i kartës së suksesit

Titulli i kartës së rrezikut

Titulli i kartës paralajmëruese

Titulli i kartës së informacionit

Titulli i kartës së lehtë

Titulli i kartës së errët

Përcjellja e kuptimit tek teknologjitë ndihmëse

Kufiri

Titulli kryesor i kartës

Titulli i kartës dytësore

Titulli i kartës së suksesit

Titulli i kartës së rrezikut

Titulli i kartës paralajmëruese

Titulli i kartës së informacionit

Titulli i kartës së lehtë

Titulli i kartës së errët

Përzien shërbimet komunale

Titulli i kartës së suksesit

Paraqitja e kartës

Grupet e kartave

Titulli i kartës

Titulli i kartës

Titulli i kartës

Titulli i kartës

Titulli i kartës

Titulli i kartës

Kuvertë letrash

Titulli i kartës

Titulli i kartës

Titulli i kartës

Titulli i kartës

Titulli i kartës

Titulli i kartës

Kolonat e kartave

Titulli i kartës që përfundon në një rresht të ri

Titulli i kartës