Source

Картички

Картичките на Bootstrap обезбедуваат флексибилен и проширлив контејнер за содржина со повеќе варијанти и опции.

За

Картичката е флексибилен и растеглив контејнер со содржина . Вклучува опции за заглавија и подножја, широк спектар на содржини, контекстуални бои на позадината и моќни опции за прикажување. Ако сте запознаени со Bootstrap 3, картичките ги заменуваат нашите стари панели, бунари и сликички. Слична функционалност на тие компоненти е достапна како класи на модификатори за картички.

Пример

Картичките се изградени со што е можно помало обележување и стилови, но сепак успеваат да испорачаат голем број на контрола и приспособување. Изградени со flexbox, тие нудат лесно усогласување и добро се мешаат со другите компоненти на Bootstrap. Стандардно немаат margin, затоа користете ги алатките за растојание по потреба.

Подолу е пример за основна картичка со мешана содржина и фиксна ширина. Картичките немаат фиксна ширина за почеток, така што тие природно ќе ја пополнат целата ширина на неговиот родителски елемент. Ова лесно се прилагодува со нашите различни опции за големина .

100% x 180
Наслов на картичката

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Оди некаде 
<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>

Видови содржини

Картичките поддржуваат широк спектар на содржини, вклучувајќи слики, текст, групи списоци, врски и многу повеќе. Подолу се дадени примери за тоа што е поддржано.

Тело

Градежниот блок на картичката е .card-body. Користете го секогаш кога ви треба пополнет дел во картичката.

Ова е некој текст во телото на картичката. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Наслови, текст и врски

Насловите на картичките се користат со додавање .card-titleна <h*>ознака. На ист начин, врските се додаваат и се поставуваат една до друга со додавање .card-linkна <a>ознака.

Преводите се користат со додавање a .card-subtitleна <h*>ознака. Ако .card-titleи .card-subtitleставките се ставени во .card-bodyставка, насловот и поднасловот на картичката се убаво порамнети.

Наслов на картичката
Превод на картичката

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Врска со картичка Друга врска 
<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>

Слики

.card-img-topпоставува слика на врвот на картичката. Со .card-text, текстот може да се додаде на картичката. Текстот внатре .card-text, исто така, може да биде стилизиран со стандардни HTML ознаки.

Капа за слика [100%x180]

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

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

Наведете групи

Креирајте списоци на содржини во картичка со група за флеш листа.

  • Cras justo odio
  • Dapibus ac facilisis во
  • Вестибулум и ерос
<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>
Избрана
  • Cras justo odio
  • Dapibus ac facilisis во
  • Вестибулум и ерос
<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>

Кујнски мијалник

Измешајте и поклопете повеќе типови содржини за да ја креирате картичката што ви треба или фрлете сè таму. Подолу се прикажани стилови на слики, блокови, стилови на текст и група списоци - сите завиткани во картичка со фиксна ширина.

Капа за слика [100%x180]
Наслов на картичката

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

  • Cras justo odio
  • Dapibus ac facilisis во
  • Вестибулум и ерос
Врска со картичка Друга врска 
<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>

Додајте изборно заглавие и/или подножје во картичката.

Избрана
Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде 
<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-headerна <h*>елементи.

Избрана
Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде 
<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>
Цитат

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

Некој познат во изворниот наслов 
<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>
Избрана
Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде
Пред 2 дена 
<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>

Димензионирање

Картичките не претпоставуваат специфични widthза почеток, така што тие ќе бидат широки 100%, освен ако не е поинаку наведено. Можете да го промените ова по потреба со прилагодени CSS, класи на мрежа, миксови на grid Sass или комунални услуги.

Користење на означување на мрежа

Користејќи ја мрежата, завиткајте ги картичките во колони и редови по потреба.

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде
Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде 
<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>

Користење на комунални услуги

Користете ги нашите неколку достапни алатки за одредување големина за брзо поставување на ширината на картичката.

Наслов на картичката

Со помошен текст подолу како природен довод за дополнителна содржина.

Копче
Наслов на картичката

Со помошен текст подолу како природен довод за дополнителна содржина.

Копче 
<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

Користете сопствен CSS во вашите листови со стилови или како вградени стилови за да поставите ширина.

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде 
<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" 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>

Додајте малку навигација во заглавието (или блок) на картичката со компонентите за навигација на Bootstrap .

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде 
<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>
Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде 
<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>

Слики

Картичките вклучуваат неколку опции за работа со слики. Изберете од додавање „капи за слики“ на двата краја на картичката, преклопување на слики со содржина на картичката или едноставно вметнување на сликата во картичка.

Капи на сликата

Слично на заглавијата и подножјето, картичките може да вклучуваат горни и долни „капи за слики“ - слики на врвот или на дното на картичката.

100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин

Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин

100% x 180 
<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>

Преклопувања на слики

Претворете ја сликата во позадина на картичката и преклопете го текстот на вашата картичка. Во зависност од сликата, можеби ќе ви требаат или не ќе ви требаат дополнителни стилови или алатки.

100% x 270
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин

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

Стилови на картички

Картичките вклучуваат различни опции за прилагодување на нивните позадини, граници и боја.

Позадина и боја

Користете ги алатките за текст и заднина за да го промените изгледот на картичката.

Заглавие
Наслов на основна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на секундарна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на успешна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на карта за опасност

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на картичката за предупредување

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на инфо картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на лесна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на темна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

<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>
Пренесување значење на помошните технологии

Користењето боја за додавање значење обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурајте се дека информациите означени со бојата се или очигледни од самата содржина (на пр. видлив текст), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со .sr-onlyкласата.

Граница

Користете гранични алатки за да го промените само делот border-colorод картичката. Имајте предвид дека можете да ставите .text-{color}класи на родителот .cardили подмножество од содржината на картичката како што е прикажано подолу.

Заглавие
Наслов на основна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на секундарна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на успешна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на карта за опасност

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на картичката за предупредување

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на инфо картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на лесна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Заглавие
Наслов на темна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

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

Ги меша комуналните услуги

Можете исто така да ги менувате границите на заглавието и подножјето на картичката по потреба, па дури и да ги отстраните background-colorсо .bg-transparent.

Заглавие
Наслов на успешна картичка

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Подножје 
<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>

Распоред на картички

Покрај стилизирањето на содржината во картичките, Bootstrap вклучува неколку опции за поставување на серии на картички. Засега, овие опции за распоред сè уште не реагираат .

Групи со картички

Користете групи на картички за прикажување на картичките како единечен, прикачен елемент со колони со еднаква ширина и висина. Групите со картички ги користат display: flex;за да постигнат униформа големина.

100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин

100% x 180
Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.

Последно ажурирање пред 3 мин

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

Кога користите групи на картички со подножја, нивната содржина автоматски ќе се нареди.

100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин
100% x 180
Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин
100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.

Последно ажурирање пред 3 мин 
<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>

Палуби со карти

Ви треба сет од картички со еднаква ширина и висина кои не се прикачени една на друга? Користете палуби со карти.

100% x 200
Наслов на картичката

Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин

100% x 200
Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

100% x 200
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.

Последно ажурирање пред 3 мин

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

Исто како и кај групите картички, подножјето на картичките во палубите автоматски ќе се редат.

100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин
100% x 180
Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин
100% x 180
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.

Последно ажурирање пред 3 мин 
<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>

Колони со картички

Картичките може да се организираат во колони слични на ѕидарски.card-columns само со CSS со завиткување во . Картичките се изградени со CSS columnсвојства наместо flexbox за полесно усогласување. Картите се нарачуваат од горе до долу и од лево кон десно.

Главите горе! Вашата километража со колоните со картички може да варира. За да спречиме прекршување на картичките низ колоните, мора да ги поставиме display: inline-blockкако што column-break-inside: avoidсè уште не е решение отпорно на куршуми.

100% x 160
Наслов на картичката што се завиткува во нова линија

Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

Некој познат во изворниот наслов
100% x 160
Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat.

Некој познат во изворниот наслов
Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

100% x 260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

Некој познат во изворниот наслов
Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.

Последно ажурирање пред 3 мин

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

Колоните на картичките исто така може да се прошират и прилагодат со дополнителен код. Подолу е прикажана екстензија на .card-columnsкласата која ја користи истата CSS што ја користиме - CSS колони - за да генерираме множество од одговорни нивоа за менување на бројот на колони.

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