Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

Картице

Боотстрап картице пружају флексибилан и проширив контејнер садржаја са више варијанти и опција.

На овој страници

О томе

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

Пример

Картице су направљене са што мање ознака и стилова, али ипак успевају да испоруче тону контроле и прилагођавања. Направљени са флексбоксом, нуде лако поравнање и добро се мешају са другим Боотстрап компонентама. marginПодразумевано немају , па користите услужне програме за размак по потреби.

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

Placeholder Image cap
Наслов картице

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

Иди негде
хтмл 
<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>

Типови садржаја

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

Тело

Грађевински блок картице је .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>ознаку.

Титлови се користе додавањем а .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се такође може стилизовати са стандардним ХТМЛ ознакама.

Placeholder Image cap

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

хтмл 
<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>

Листа група

Креирајте листе садржаја на картици са групом листе за испирање.

  • Ставка
  • Друга ставка
  • Трећа ставка
хтмл 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Изабран
  • Ставка
  • Друга ставка
  • Трећа ставка
хтмл 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Ставка
  • Друга ставка
  • Трећа ставка
Подножје картице
хтмл 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Судопера

Мешајте и упарите више типова садржаја да бисте направили картицу која вам је потребна или ставите све тамо. Доле су приказани стилови слика, блокови, стилови текста и група листе—све умотано у картицу фиксне ширине.

Placeholder Image cap
Наслов картице

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

  • Ставка
  • Друга ставка
  • Трећа ставка
Веза са картицом Још једна веза
хтмл 
<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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</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>
Цитат

Добро познати цитат, садржан у елементу блок цитата.

Неко познат у наслову извора
хтмл 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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% широке осим ако није другачије наведено. Ово можете променити по потреби помоћу прилагођеног ЦСС-а, грид класа, грид Сасс миксина или услужних програма.

Коришћење мрежних ознака

Користећи мрежу, умотајте картице у колоне и редове по потреби.

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

Са пратећим текстом испод као природним уводом у додатни садржај.

Иди негде
Посебан насловни третман

Са пратећим текстом испод као природним уводом у додатни садржај.

Иди негде
хтмл 
<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>

Коришћење прилагођеног ЦСС-а

Користите прилагођени ЦСС у својим стиловима или као уграђене стилове да бисте подесили ширину.

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

Са пратећим текстом испод као природним уводом у додатни садржај.

Иди негде
хтмл 
<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-end" 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">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" 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">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">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>

Слике

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

Имаге цапс

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

Placeholder Image cap
Наслов картице

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

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

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

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

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

Placeholder Image cap
хтмл 
<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-bottom" alt="...">
</div>

Прекривања слика

Претворите слику у позадину картице и прекријте текст картице. У зависности од слике, можда ће вам требати или не морају бити додатни стилови или услужни програми.

Placeholder Card image
Наслов картице

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

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

хтмл 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Имајте на уму да садржај не би требало да буде већи од висине слике. Ако је садржај већи од слике, садржај ће бити приказан изван слике.

Хоризонтално

Користећи комбинацију мрежних и услужних класа, картице се могу поставити хоризонтално на начин који је прилагођен мобилним уређајима и који реагује. У примеру испод, уклањамо решеткасте олуке са .g-0и користимо .col-md-*класе да бисмо картицу учинили хоризонталном на mdтачки прекида. Можда ће бити потребна даља подешавања у зависности од садржаја ваше картице.

Placeholder Image
Наслов картице

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

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

хтмл 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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>

Стилови картица

Картице садрже различите опције за прилагођавање њихове позадине, ивица и боје.

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

Додато у в5.2.0

Поставите а background-colorса контрастним првим планом colorса нашим .text-bg-{color}помагачима . Раније је било потребно да ручно упарите свој избор .text-{color}и .bg-{color}услужне програме за стилизовање, које и даље можете користити ако желите.

Хеадер
Наслов примарне картице

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

Хеадер
Наслов секундарне картице

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

Хеадер
Наслов картице успеха

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

Хеадер
Назив картице опасности

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

Хеадер
Наслов картице упозорења

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

Хеадер
Наслов инфо картице

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

Хеадер
Лагани наслов картице

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

Хеадер
Тамни наслов картице

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

хтмл 
<div class="card text-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-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-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-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-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-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 text-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-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>
Преношење значења помоћним технологијама

Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .visually-hiddenкласом.

Граница

Користите граничне услужне програме да промените само 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">
    <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">
    <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>

Изглед картице

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

Групе картица

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

Placeholder Image cap
Наслов картице

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

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

Placeholder Image cap
Наслов картице

Ова картица има пратећи текст испод као природни увод у додатни садржај.

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

Placeholder Image cap
Наслов картице

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

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

хтмл 
<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>

Када користите групе картица са подножјима, њихов садржај ће се аутоматски поравнати.

Placeholder Image cap
Наслов картице

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

Последњи пут ажурирано пре 3 минута
Placeholder Image cap
Наслов картице

Ова картица има пратећи текст испод као природни увод у додатни садржај.

Последњи пут ажурирано пре 3 минута
Placeholder Image cap
Наслов картице

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

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

Мрежне картице

Користите Боотстрап систем мреже и његове .row-colsкласе да контролишете колико колона мреже (умотаних око ваших картица) приказујете по реду. На пример, ево .row-cols-1постављања картица на једну колону и .row-cols-md-2раздвајања четири картице на једнаку ширину у више редова, од средње тачке прекида нагоре.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

хтмл 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Промените је у .row-cols-3и видећете четврту картицу.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

хтмл 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Када вам треба једнака висина, додајте .h-100на картице. Ако желите једнаке висине подразумевано, можете да подесите $card-height: 100%у Сасс-у.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

Placeholder Image cap
Наслов картице

Ово је кратка картица.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај.

Placeholder Image cap
Наслов картице

Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.

хтмл 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

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

Placeholder Image cap
Наслов картице

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

Последњи пут ажурирано пре 3 минута
Placeholder Image cap
Наслов картице

Ова картица има пратећи текст испод као природни увод у додатни садржај.

Последњи пут ажурирано пре 3 минута
Placeholder Image cap
Наслов картице

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

Последњи пут ажурирано пре 3 минута
хтмл 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Зидарство

Користили v4смо технику само за ЦСС да опонашамо понашање колона сличних зидању , али ова техника је имала много непријатних споредних ефеката . Ако желите да имате ову врсту распореда у v5, можете једноставно користити додатак Масонри. Масонри није укључен у Боотстрап , али смо направили демо пример који ће вам помоћи да почнете.

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, картице сада користе локалне ЦСС променљиве .cardза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Сасс варијабле

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;