in English

Kortelės

„Bootstrap“ kortelės suteikia lankstų ir išplečiamą turinio talpyklą su keliais variantais ir parinktimis.

Apie

Kortelė yra lankstus ir išplečiamas turinio konteineris. Jame yra antraštės ir poraštės, platus turinio pasirinkimas, kontekstinės fono spalvos ir galingos rodymo parinktys. Jei esate susipažinę su „Bootstrap 3“, kortelės pakeičia senas plokštes, šulinius ir miniatiūras. Panašios funkcijos kaip ir šių komponentų yra prieinamos kaip kortelių modifikavimo klasės.

Pavyzdys

Kortelės sukurtos naudojant kuo mažiau žymėjimo ir stilių, tačiau vis tiek gali suteikti daug valdymo ir tinkinimo. Sukurti naudojant „flexbox“, jie lengvai suderinami ir gerai sumaišomi su kitais „Bootstrap“ komponentais. marginPagal numatytuosius nustatymus jie neturi , todėl prireikus naudokite tarpų įrankius .

Toliau pateikiamas pagrindinės kortelės su mišraus turinio ir fiksuoto pločio pavyzdys. Kortelės neturi fiksuoto pločio pradėti, todėl jos natūraliai užpildys visą pagrindinio elemento plotį. Tai lengvai pritaikoma naudojant įvairias dydžių parinktis .

Placeholder Image cap
Kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Eik kur nors 
<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>

Turinio tipai

Kortelės palaiko įvairų turinį, įskaitant vaizdus, ​​tekstą, sąrašų grupes, nuorodas ir kt. Toliau pateikti pavyzdžiai, kas palaikoma.

kūnas

Kortelės kūrimo blokas yra .card-body. Naudokite jį, kai tik reikia paminkštintos dalies kortelėje.

Tai tam tikras tekstas kortelės turinyje. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Pavadinimai, tekstas ir nuorodos

Kortelių pavadinimai naudojami pridedant .card-titleprie <h*>žymos. Lygiai taip pat nuorodos pridedamos ir dedamos viena šalia kitos, pridedant .card-linkprie <a>žymos.

Subtitrai naudojami pridedant .card-subtitleprie <h*>žymos. Jei .card-titleir .card-subtitleelementai dedami į .card-bodyelementą, kortelės pavadinimas ir paantraštė yra gražiai sulygiuoti.

Kortelės pavadinimas
Kortelės subtitrai

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Kortelės nuoroda Kita nuoroda 
<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>

Vaizdai

.card-img-topįdeda vaizdą kortelės viršuje. Naudodami .card-text, tekstą galima pridėti prie kortelės. Tekstas viduje .card-texttaip pat gali būti stilizuotas naudojant standartines HTML žymas.

Placeholder Image cap

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

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

Išvardykite grupes

Kurkite kortelės turinio sąrašus su nuleidimo sąrašo grupe.

  • Daiktas
  • Antras elementas
  • Trečias daiktas
<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>
Teminiai
  • Daiktas
  • Antras elementas
  • Trečias daiktas
<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>
  • Daiktas
  • Antras elementas
  • Trečias daiktas
Kortelės poraštė 
<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>

Virtuvės kriauklė

Sumaišykite ir suderinkite kelis turinio tipus, kad sukurtumėte reikiamą kortelę arba sudėkite viską. Žemiau rodomi vaizdų stiliai, blokai, teksto stiliai ir sąrašo grupė – visa tai suvyniota į fiksuoto pločio kortelę.

Placeholder Image cap
Kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

  • Daiktas
  • Antras elementas
  • Trečias daiktas
Kortelės nuoroda Kita nuoroda 
<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>

Kortelėje pridėkite pasirenkamą antraštę ir (arba) poraštę.

Teminiai
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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>

Kortelių antraštes galima stilizuoti pridedant .card-headerprie <h*>elementų.

Teminiai
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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>
Citata

Gerai žinoma citata, esanti blockquote elemente.

Kažkas žinomas šaltinio antraštėje 
<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>
Teminiai
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors
prieš 2 dienas 
<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>

Dydžio nustatymas

Manoma, kad kortelių widthpradžia nėra konkreti, todėl jos bus 100 % pločio, nebent nurodyta kitaip. Jei reikia, galite tai pakeisti naudodami tinkintą CSS, tinklelio klases, tinklelio Sass mišinius arba komunalines paslaugas.

Naudojant tinklelio žymėjimą

Naudodami tinklelį, pagal poreikį apvyniokite korteles į stulpelius ir eilutes.

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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>

Komunalinių paslaugų naudojimas

Norėdami greitai nustatyti kortelės plotį , naudokite keletą galimų dydžio nustatymo paslaugų .

Kortelės pavadinimas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Mygtukas
Kortelės pavadinimas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

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

Naudojant tinkintą CSS

Norėdami nustatyti plotį, naudokite tinkintą CSS savo stilių lapuose arba kaip įterptus stilius.

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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>

Teksto lygiavimas

Naudodami teksto lygiavimo klases galite greitai pakeisti bet kurios kortelės teksto lygiavimą (visą arba konkrečias dalis) .

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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>

Pridėkite šiek tiek naršymo prie kortelės antraštės (arba bloko) naudodami „Bootstrap“ navigacijos komponentus .

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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">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>
Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors 
<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>

Vaizdai

Kortelėse yra keletas darbo su vaizdais parinkčių. Galite pasirinkti pridėti „vaizdo dangtelius“ prie bet kurio kortelės galo, perdengti vaizdus su kortelės turiniu arba tiesiog įterpti vaizdą į kortelę.

Vaizdo dangteliai

Panašiai kaip antraštės ir poraštės, kortelės gali turėti viršutinę ir apatinę „vaizdo dangtelius“ – vaizdus kortelės viršuje arba apačioje.

Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

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>

Vaizdo perdangos

Paverskite vaizdą kortelės fonu ir perdenkite kortelės tekstą. Priklausomai nuo vaizdo, jums gali prireikti papildomų stilių ar paslaugų.

Placeholder Card image
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Atminkite, kad turinys neturėtų būti didesnis nei vaizdo aukštis. Jei turinys yra didesnis nei vaizdas, turinys bus rodomas už vaizdo ribų.

Horizontalus

Naudojant tinklelio ir naudingumo klasių derinį, kortelės gali būti paverstos horizontaliomis mobiliesiems patogiu ir reaguojančiu būdu. Toliau pateiktame pavyzdyje pašaliname tinklelio latakus .no-guttersir naudojame .col-md-*klases, kad kortelė būtų horizontali lūžio taške md. Priklausomai nuo kortelės turinio, gali prireikti papildomų koregavimų.

Placeholder Image
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

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

Kortelių stiliai

Kortelėse yra įvairių fono, kraštinių ir spalvos tinkinimo parinkčių.

Fonas ir spalva

Norėdami pakeisti kortelės išvaizdą, naudokite teksto ir fono programas .

Antraštė
Pagrindinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Antrinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Sėkmės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Pavojaus kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Įspėjimo kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Informacinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Šviesos kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Tamsios kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

<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>
Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-onlyklasėje.

Sienos

Norėdami pakeisti tik kortelės pavadinimą, naudokite pasienio įrankius . Atminkite, kad klases border-colorgalite priskirti pirminiam kortelės turinio pogrupiui, kaip parodyta toliau..text-{color}.card

Antraštė
Pagrindinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Antrinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Sėkmės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Pavojaus kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Įspėjimo kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Informacinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Šviesos kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Tamsios kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins komunalinės paslaugos

Taip pat galite pakeisti kortelės antraštės ir poraštės kraštines, jei reikia, ir netgi pašalinti jas background-colornaudodami .bg-transparent.

Antraštė
Sėkmės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Poraštė 
<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>

Kortelės išdėstymas

Be kortelių turinio stiliaus, „Bootstrap“ apima keletą kortelių serijų išdėstymo parinkčių. Kol kas šios išdėstymo parinktys dar nereaguoja .

Kortelių grupės

Naudokite kortelių grupes, kad pateiktumėte korteles kaip vieną prisegtą elementą su vienodo pločio ir aukščio stulpeliais. Kortelių grupės pradedamos sukrauti ir naudojamos display: flex;vienodų matmenų pritvirtinimui, pradedant nuo smlūžio taško.

Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Placeholder Image cap
Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes

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

Naudojant kortelių grupes su poraštėmis, jų turinys automatiškai išsirikiuoja.

Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes
Placeholder Image cap
Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes
Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes 
<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>

Kortų kaladės

Reikia vienodo pločio ir aukščio kortelių, kurios nėra pritvirtintos viena prie kitos? Naudokite kortų kaladės.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Placeholder Image cap
Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kaip ir kortų grupių atveju, kortų poraštės kaladėse automatiškai išsirikiuoja.

Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes
Placeholder Image cap
Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes
Placeholder Image cap
Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes 
<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Tinklelio kortelės

Naudokite „Bootstrap“ tinklelio sistemą ir jos .row-colsklases , kad galėtumėte valdyti, kiek tinklelio stulpelių (apvyniotų aplink jūsų korteles) rodote vienoje eilutėje. Pavyzdžiui, .row-cols-1kortelių išdėstymas viename stulpelyje ir .row-cols-md-2keturių kortelių padalijimas į vienodą plotį keliose eilutėse, pradedant nuo vidutinės pertraukos taško.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Pakeiskite jį į .row-cols-3ir pamatysite ketvirtą kortelės apvyniojimą.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Kai jums reikia vienodo aukščio, pridėkite .h-100prie kortelių. Jei pagal numatytuosius nustatymus norite vienodo aukščio, galite nustatyti $card-height: 100%Sass.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Placeholder Image cap
Kortelės pavadinimas

Tai trumpa kortelė.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Kortelių stulpeliai

Kortelės gali būti suskirstytos į mūrinius stulpelius, naudojant tik CSS, suvyniojus jas į .card-columns. Kortelės sukurtos naudojant CSS columnypatybes, o ne „flexbox“, kad būtų lengviau suderinti. Kortelės rūšiuojamos iš viršaus į apačią ir iš kairės į dešinę.

Galvas aukštyn! Jūsų rida su kortelių stulpeliais gali skirtis. Kad kortelės neišsiskirs į stulpelius, turime jas nustatyti, display: inline-blocknes column-break-inside: avoidtai dar nėra neperšaunamas sprendimas.

Placeholder Image cap
Kortelės pavadinimas, kuris perkeliamas į naują eilutę

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Gerai žinoma citata, esanti blockquote elemente.

Kažkas žinomas šaltinio antraštėje
Placeholder Image cap
Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Gerai žinoma citata, esanti blockquote elemente.

Kažkas žinomas šaltinio antraštėje
Kortelės pavadinimas

Šioje kortelėje yra įprastas pavadinimas ir trumpa teksto pastraipa po juo.

Paskutinį kartą atnaujinta prieš 3 minutes

Placeholder Card image

Gerai žinoma citata, esanti blockquote elemente.

Kažkas žinomas šaltinio antraštėje
Kortelės pavadinimas

Tai dar viena kortelė su pavadinimu ir pagalbiniu tekstu žemiau. Šioje kortelėje yra šiek tiek papildomo turinio, kad ji būtų šiek tiek aukštesnė.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kortelių stulpelius taip pat galima išplėsti ir pritaikyti tam tikru papildomu kodu. Žemiau parodytas klasės plėtinys, .card-columnsnaudojant tą patį CSS, kurį naudojame – CSS stulpelius – kad sugeneruotų reaguojančių pakopų rinkinį, skirtą pakeisti stulpelių skaičių.

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