Картице
Боотстрап картице пружају флексибилан и проширив контејнер садржаја са више варијанти и опција.
Картица је флексибилан и проширив контејнер садржаја . Укључује опције за заглавља и подножја, широк избор садржаја, контекстуалне боје позадине и моћне опције приказа. Ако сте упознати са Боотстрап 3, картице замењују наше старе панеле, бунаре и сличице. Слична функционалност овим компонентама доступна је као модификаторске класе за картице.
Картице су направљене са што мање ознака и стилова, али ипак успевају да испоруче тону контроле и прилагођавања. Направљени са флексбоксом, нуде лако поравнање и добро се мешају са другим Боотстрап компонентама. margin
Подразумевано немају , па користите услужне програме за размак по потреби.
Испод је пример основне картице са мешовитим садржајем и фиксном ширином. Картице немају фиксну ширину за почетак, тако да ће природно испунити пуну ширину свог родитељског елемента. Ово се лако прилагођава нашим различитим опцијама величине .
Наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Иди негде<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>
ознаку.
Титлови се користе додавањем а .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
се такође може стилизовати са стандардним ХТМЛ ознакама.
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
<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>
Креирајте листе садржаја на картици са групом листе за испирање.
- Црас јусто одио
- Дапибус ац фацилисис ин
- Вестибулум у еросу
<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>
- Црас јусто одио
- Дапибус ац фацилисис ин
- Вестибулум у еросу
<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>
Мешајте и упарите више типова садржаја да бисте направили картицу која вам је потребна или ставите све тамо. Доле су приказани стилови слика, блокови, стилови текста и група листе—све умотано у картицу фиксне ширине.
Наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
- Црас јусто одио
- Дапибус ац фацилисис ин
- Вестибулум у еросу
<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>
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
<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>
Посебан насловни третман
Са пратећим текстом испод као природним уводом у додатни садржај.
Иди негде<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-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>
Додајте мало навигације у заглавље (или блок) картице помоћу навигацијских компоненти Боотстрап-а .
Посебан насловни третман
Са пратећим текстом испод као природним уводом у додатни садржај.
Иди негде<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>
Картице укључују неколико опција за рад са сликама. Изаберите између додавања „капа слика“ на оба краја картице, преклапања слика са садржајем картице или једноставног уграђивања слике у картицу.
Слично као заглавља и подножја, картице могу да садрже горње и доње „капе слика“—слике на врху или дну картице.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
<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>
Претворите слику у позадину картице и прекријте текст картице. У зависности од слике, можда ће вам требати или не морају бити додатни стилови или услужни програми.
<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>
Поред стилизовања садржаја унутар картица, Боотстрап укључује неколико опција за постављање серије картица. За сада, ове опције распореда још увек не реагују .
Користите групе картица да бисте приказали картице као један, причвршћени елемент са колонама једнаке ширине и висине. Групе картица користе display: flex;
за постизање своје униформне величине.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Последњи пут ажурирано пре 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>
Када користите групе картица са подножјима, њихов садржај ће се аутоматски поравнати.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
<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>
Треба вам сет картица једнаке ширине и висине које нису причвршћене једна за другу? Користите шпилове карата.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Последњи пут ажурирано пре 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>
Као и код група карата, подножја карата у шпилу ће се аутоматски поравнати.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
<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
. Картице су направљене са ЦСС column
својствима уместо флексбокса ради лакшег поравнања. Карте су поређане одозго на доле и са лева на десно.
Главу горе! Ваша километража са колонама картице може да варира. Да бисмо спречили да се картице разбију по колонама, морамо их поставити на display: inline-block
као што column-break-inside: avoid
још није решење отпорно на метке.
Наслов картице који се премотава у нови ред
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Последњи пут ажурирано пре 3 минута
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат.
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Последњи пут ажурирано пре 3 минута
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Последњи пут ажурирано пре 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
класе које користи исти ЦСС који користимо – ЦСС колоне – за генерисање скупа респонзивних нивоа за промену броја колона.