Source

ካርዶች

የ Bootstrap ካርዶች ከበርካታ ልዩነቶች እና አማራጮች ጋር ተለዋዋጭ እና ሊሰፋ የሚችል የይዘት መያዣ ይሰጣሉ።

ስለ

ካርድ ተለዋዋጭ እና ሊሰፋ የሚችል የይዘት መያዣ ነው። ለራስጌዎች እና ግርጌዎች አማራጮች፣ ብዙ አይነት ይዘቶች፣ የአውድ ዳራ ቀለሞች እና ኃይለኛ የማሳያ አማራጮችን ያካትታል። ስለ Bootstrap 3 የሚያውቁ ከሆኑ ካርዶች የድሮ ፓነሎችን፣ ጉድጓዶችን እና ድንክዬዎችን ይተካሉ። ከእነዚያ አካላት ጋር ተመሳሳይነት ያለው ተግባር ለካርዶች እንደ ማሻሻያ ክፍሎች ይገኛል።

ለምሳሌ

ካርዶች በተቻለ መጠን በትንሽ ማርክ እና ቅጦች የተገነቡ ናቸው፣ ነገር ግን አሁንም ብዙ ቁጥጥር እና ማበጀትን ችለዋል። በ flexbox የተገነቡ፣ ቀላል አሰላለፍ ያቀርባሉ እና ከሌሎች የቡትስትራፕ ክፍሎች ጋር በደንብ ይደባለቃሉ። marginበነባሪነት የላቸውም ፣ ስለዚህ እንደ አስፈላጊነቱ የቦታ መገልገያዎችን ይጠቀሙ።

ከታች የተደባለቀ ይዘት እና ቋሚ ስፋት ያለው የመሠረታዊ ካርድ ምሳሌ ነው. ካርዶች ለመጀመር ምንም ቋሚ ስፋት የላቸውም፣ ስለዚህ በተፈጥሮ የወላጅ ኤለመንቱን ሙሉ ስፋት ይሞላሉ። ይህ በተለያዩ የመጠን ምርጫዎቻችን በቀላሉ ተበጅቷል ።

100% x180
የካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

የሆነ ቦታ ሂድ 
<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በመደበኛ HTML መለያዎችም ሊቀረጽ ይችላል።

የምስል ካፕ [100%x180]

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ቡድኖችን ዘርዝር

ከብልጭታ ዝርዝር ቡድን ጋር በካርድ ውስጥ የይዘት ዝርዝሮችን ይፍጠሩ።

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum እና eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
ተለይቶ የቀረበ
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum እና eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

የወጥ ቤት ማጠቢያ

የሚፈልጉትን ካርድ ለመፍጠር ብዙ የይዘት ዓይነቶችን ያዋህዱ እና ያዛምዱ ወይም ሁሉንም ነገር እዚያ ውስጥ ይጣሉት። ከታች የሚታዩት የምስል ስታይል፣ ብሎኮች፣ የፅሁፍ ስታይል እና የዝርዝር ቡድን - ሁሉም በቋሚ ወርድ ካርድ ተጠቅልለዋል።

የምስል ካፕ [100%x180]
የካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum እና eros
የካርድ ማገናኛ ሌላ አገናኝ 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

በካርድ ውስጥ አማራጭ ራስጌ እና/ወይም ግርጌ ያክሉ።

ተለይቶ የቀረበ
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-headerየካርድ ራስጌዎችን ወደ <h*>አባሎች በማከል ቅጥ ሊደረግ ይችላል ።

ተለይቶ የቀረበ
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ጥቅስ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ተለይቶ የቀረበ
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ
ከ 2 ቀናት በፊት 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

መጠናቸው

ካርዶች widthለመጀመር የተለየ ነገር የለም ብለው ያስባሉ፣ ስለዚህ በሌላ መልኩ ካልተገለጸ በስተቀር 100% ስፋት ይኖራቸዋል። ይህንን በብጁ CSS፣ በፍርግርግ ክፍሎች፣ በፍርግርግ Sass ድብልቅ ነገሮች ወይም መገልገያዎች እንደ አስፈላጊነቱ መለወጥ ይችላሉ።

የፍርግርግ ምልክት ማድረጊያን በመጠቀም

ፍርግርግ በመጠቀም ካርዶችን እንደ አስፈላጊነቱ በአምዶች እና ረድፎች ይጠቅለሉ።

ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

መገልገያዎችን መጠቀም

የካርድን ስፋት በፍጥነት ለማዘጋጀት የእኛን እፍኝ መጠን ያላቸውን መገልገያዎች ይጠቀሙ።

የካርድ ርዕስ

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

አዝራር
የካርድ ርዕስ

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

አዝራር 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

ብጁ CSS በመጠቀም

ስፋትን ለማዘጋጀት ብጁ CSSን በእርስዎ የቅጥ ሉሆች ወይም እንደ የመስመር ውስጥ ቅጦች ይጠቀሙ።

ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

የጽሑፍ አሰላለፍ

የማንኛውንም ካርድ የጽሑፍ አሰላለፍ በፍጥነት መለወጥ ትችላለህ - ሙሉ በሙሉ ወይም የተወሰኑ ክፍሎች - ከጽሑፍ ክፍሎቻችን ጋር ።

ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ከ Bootstrap's nav ክፍሎች ጋር በካርድ ራስጌ (ወይም እገዳ) ላይ አንዳንድ አሰሳ ያክሉ ።

ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ልዩ ርዕስ ሕክምና

ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ ከዚህ በታች ባለው ደጋፊ ጽሑፍ።

የሆነ ቦታ ሂድ 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ምስሎች

ካርዶች ከምስሎች ጋር ለመስራት ጥቂት አማራጮችን ያካትታሉ. በካርዱ በሁለቱም ጫፍ ላይ “የምስል ካፕ”ን ከመክተት፣ ምስሎችን በካርድ ይዘት ከተደራረቡ ወይም በቀላሉ ምስሉን በካርድ ውስጥ ከመክተት ይምረጡ።

የምስል መያዣዎች

ከራስጌዎች እና ግርጌዎች ጋር በሚመሳሰል መልኩ ካርዶች ከላይ እና ከታች "የምስል ክዳን" - በካርድ ላይ ወይም ከታች ምስሎችን ሊያካትቱ ይችላሉ።

100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

100% x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

የምስል ተደራቢዎች

ምስልን ወደ ካርድ ዳራ ቀይር እና የካርድህን ጽሁፍ ተደራቢ። በምስሉ ላይ በመመስረት, ተጨማሪ ቅጦች ወይም መገልገያዎች ሊፈልጉ ወይም ላያስፈልጉ ይችላሉ.

100% x270
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

የካርድ ቅጦች

ካርዶች ዳራቸውን፣ ድንበራቸውን እና ቀለማቸውን ለማበጀት የተለያዩ አማራጮችን ያካትታሉ።

ዳራ እና ቀለም

የካርድን መልክ ለመለወጥ የጽሑፍ እና የጀርባ መገልገያዎችን ይጠቀሙ ።

ራስጌ
የመጀመሪያ ደረጃ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የሁለተኛ ደረጃ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የስኬት ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የአደጋ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የማስጠንቀቂያ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የመረጃ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የብርሃን ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የጨለማ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-onlyከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

ድንበር

የካርድን ብቻ ​​ለመለወጥ የድንበር መገልገያዎችን ይጠቀሙ ። ከታች እንደሚታየው በወላጅ ወይም በካርዱ ይዘት ንዑስ ክፍል ላይ ክፍሎችን border-colorማስቀመጥ እንደሚችሉ ልብ ይበሉ ..text-{color}.card

ራስጌ
የመጀመሪያ ደረጃ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የሁለተኛ ደረጃ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የስኬት ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የአደጋ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የማስጠንቀቂያ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የመረጃ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የብርሃን ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ራስጌ
የጨለማ ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

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

ድብልቅ መገልገያዎች

እንደ አስፈላጊነቱ በካርድ ራስጌ እና ግርጌ ላይ ያሉትን ድንበሮች መቀየር እና እንዲያውም background-colorበ .bg-transparent.

ራስጌ
የስኬት ካርድ ርዕስ

አንዳንድ ፈጣን ምሳሌ ጽሑፍ በካርዱ ርዕስ ላይ ለመገንባት እና የካርዱን ይዘት ትልቁን ድርሻ ይይዛል።

ግርጌ 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

የካርድ አቀማመጥ

በካርዶች ውስጥ ያለውን ይዘት ከመቅረጽ በተጨማሪ ቡትስትራፕ ተከታታይ ካርዶችን ለመዘርጋት ጥቂት አማራጮችን ያካትታል። ለጊዜው እነዚህ የአቀማመጥ አማራጮች ገና ምላሽ ሰጪ አይደሉም ።

የካርድ ቡድኖች

ካርዶችን እንደ አንድ ነጠላ ፣ እኩል ስፋት እና ቁመት አምዶች ያሉት አካል ለማድረግ የካርድ ቡድኖችን ይጠቀሙ። የካርድ ቡድኖች display: flex;የደንብ መጠናቸውን ለማሳካት ይጠቀማሉ።

100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

100% x180
የካርድ ርዕስ

ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። እኩል የከፍታ እርምጃን ለማሳየት ይህ ካርድ ከመጀመሪያው የበለጠ ረዘም ያለ ይዘት አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

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

የካርድ ቡድኖችን ከግርጌዎች ጋር ሲጠቀሙ ይዘታቸው በራስ-ሰር ይሰለፋል።

100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
100% x180
የካርድ ርዕስ

ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። እኩል የከፍታ እርምጃን ለማሳየት ይህ ካርድ ከመጀመሪያው የበለጠ ረዘም ያለ ይዘት አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው። 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

የካርድ ሰሌዳዎች

እርስ በርስ ያልተያያዙ እኩል ስፋት እና ቁመት ያላቸው ካርዶች ይፈልጋሉ? የካርድ ማስቀመጫዎችን ይጠቀሙ.

100% x200
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ረጅም ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

100% x200
የካርድ ርዕስ

ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

100% x200
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። እኩል የከፍታ እርምጃን ለማሳየት ይህ ካርድ ከመጀመሪያው የበለጠ ረዘም ያለ ይዘት አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

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

ልክ እንደ የካርድ ቡድኖች፣ በካርድ ውስጥ ያሉ የካርድ ግርጌዎች በራስ-ሰር ይሰለፋሉ።

100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
100% x180
የካርድ ርዕስ

ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
100% x180
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። እኩል የከፍታ እርምጃን ለማሳየት ይህ ካርድ ከመጀመሪያው የበለጠ ረዘም ያለ ይዘት አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው። 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

የካርድ አምዶች

ካርዶችን ወደ ሜሶነሪ -እንደ አምዶች በ CSS ብቻ በመጠቅለል ሊደራጁ ይችላሉ .card-columns። columnካርዶች በቀላሉ ለማጣጣም ከ flexbox ይልቅ በሲኤስኤስ ባህሪያት የተገነቡ ናቸው ። ካርዶች ከላይ ወደ ታች እና ከግራ ወደ ቀኝ ይታዘዛሉ.

ቀና በል! ከካርድ ዓምዶች ጋር ያለው ርቀትዎ ሊለያይ ይችላል። ካርዶች በአምዶች ላይ እንዳይሰበሩ ለመከላከል፣ እስካሁን ጥይት የማይበገር መፍትሄ display: inline-blockእንዲሆን ልናስቀምጣቸው ይገባል።column-break-inside: avoid

100% x160
ወደ አዲስ መስመር የሚያጠቃልለው የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ረጅም ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
100% x160
የካርድ ርዕስ

ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat.

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
የካርድ ርዕስ

ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

100% x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር posuere erat a ante።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
የካርድ ርዕስ

ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ሰፋ ያለ ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። እኩል የከፍታ እርምጃን ለማሳየት ይህ ካርድ ከመጀመሪያው የበለጠ ረዘም ያለ ይዘት አለው።

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

የካርድ አምዶች ከአንዳንድ ተጨማሪ ኮድ ጋር ሊራዘሙ እና ሊበጁ ይችላሉ። ከዚህ በታች የሚታየው .card-columnsእኛ የምንጠቀመውን CSS-CSS አምዶችን በመጠቀም የክፍል ማራዘሚያ የአምዶችን ብዛት ለመቀየር ምላሽ ሰጪ ደረጃዎችን ለመፍጠር ነው።

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