ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

ካርዶች

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

በዚህ ገጽ ላይ

ስለ

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

ለምሳሌ

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

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

Placeholder Image cap
የካርድ ርዕስ

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

የሆነ ቦታ ሂድ
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

የይዘት ዓይነቶች

ካርዶች ምስሎችን፣ ጽሑፎችን፣ የዝርዝር ቡድኖችን፣ አገናኞችን እና ሌሎችንም ጨምሮ የተለያዩ ይዘቶችን ይደግፋሉ። ከታች ያሉት የሚደገፉት ምሳሌዎች ናቸው።

አካል

የካርድ ግንባታው .card-bodyእ.ኤ.አ. በካርድ ውስጥ የታሸገ ክፍል ሲፈልጉ ይጠቀሙበት።

ይህ በካርድ አካል ውስጥ የተወሰነ ጽሑፍ ነው።
html 
<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

የካርድ ርዕስ
የካርድ ንዑስ ርዕስ

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

የካርድ ማገናኛ ሌላ አገናኝ
html 
<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 መለያዎችም ሊቀረጽ ይችላል።

Placeholder Image cap

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

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

ቡድኖችን ዘርዝር

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

  • ንጥል ነገር
  • ሁለተኛ ንጥል
  • ሦስተኛው ንጥል
html 
<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>
ተለይቶ የቀረበ
  • ንጥል ነገር
  • ሁለተኛ ንጥል
  • ሦስተኛው ንጥል
html 
<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>
  • ንጥል ነገር
  • ሁለተኛ ንጥል
  • ሦስተኛው ንጥል
የካርድ ግርጌ
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

የወጥ ቤት ማጠቢያ

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

Placeholder Image cap
የካርድ ርዕስ

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

  • ንጥል ነገር
  • ሁለተኛ ንጥል
  • ሦስተኛው ንጥል
የካርድ ማገናኛ ሌላ አገናኝ
html 
<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>

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

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

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

የሆነ ቦታ ሂድ
html 
<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*>አባሎች በማከል ቅጥ ሊደረግ ይችላል ።

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

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

የሆነ ቦታ ሂድ
html 
<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>
ጥቅስ

በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ተለይቶ የቀረበ
ልዩ ርዕስ ሕክምና

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

የሆነ ቦታ ሂድ
ከ 2 ቀናት በፊት
html 
<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 ድብልቅ ነገሮች ወይም መገልገያዎች እንደ አስፈላጊነቱ መለወጥ ይችላሉ።

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

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

ልዩ ርዕስ ሕክምና

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

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

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

የሆነ ቦታ ሂድ
html 
<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>

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

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

የካርድ ርዕስ

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

አዝራር
የካርድ ርዕስ

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

አዝራር
html 
<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ን በእርስዎ የቅጥ ሉሆች ወይም እንደ የመስመር ውስጥ ቅጦች ይጠቀሙ።

ልዩ ርዕስ ሕክምና

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

የሆነ ቦታ ሂድ
html 
<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>

የጽሑፍ አሰላለፍ

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

ልዩ ርዕስ ሕክምና

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

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

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

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

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

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

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

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

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

ልዩ ርዕስ ሕክምና

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

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

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

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

ምስሎች

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

የምስል መያዣዎች

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

Placeholder Image cap
የካርድ ርዕስ

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

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

የካርድ ርዕስ

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

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

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

የምስል ተደራቢዎች

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

Placeholder Card image
የካርድ ርዕስ

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

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

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
ይዘት ከምስሉ ቁመት በላይ መሆን እንደሌለበት ልብ ይበሉ. ይዘቱ ከምስሉ በላይ ከሆነ ይዘቱ ከምስሉ ውጭ ይታያል።

አግድም

የፍርግርግ እና የመገልገያ ክፍሎችን ጥምረት በመጠቀም ካርዶች ለሞባይል ተስማሚ እና ምላሽ ሰጪ በሆነ መንገድ አግድም ሊደረጉ ይችላሉ። ከዚህ በታች ባለው ምሳሌ ላይ የፍርግርግ ወራጆችን በጋር እናስወግዳለን .g-0እና .col-md-*ካርዱን በእረፍት ቦታ ላይ አግድም ለማድረግ ክፍሎችን እንጠቀማለን md. በካርድዎ ይዘት ላይ በመመስረት ተጨማሪ ማስተካከያዎች ያስፈልጉ ይሆናል።

Placeholder Image
የካርድ ርዕስ

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

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

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

የካርድ ቅጦች

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

ዳራ እና ቀለም

በ v5.2.0 ውስጥ ተጨምሯል

ከረዳቶቻችን ጋር background-colorበተቃራኒ የፊት ገጽ ያዘጋጁ ። ከዚህ ቀደም የእርስዎን ምርጫ እና መገልገያዎችን ለቅጥ አሰራር ማጣመር ይጠበቅብዎታል ፣ አሁንም ከመረጡ ሊጠቀሙበት ይችላሉ።color.text-bg-{color}.text-{color}.bg-{color}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ድንበር

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ድብልቅ መገልገያዎች

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

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

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

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

የካርድ አቀማመጥ

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

የካርድ ቡድኖች

ካርዶችን እንደ አንድ ነጠላ ፣ እኩል ስፋት እና ቁመት አምዶች ያሉት አካል ለማድረግ የካርድ ቡድኖችን ይጠቀሙ። የካርድ ቡድኖች ተደራርበው ይጀምራሉ እና ከመቋረጫ ነጥብ display: flex;ጀምሮ አንድ ወጥ በሆነ መጠን smለመያያዝ ይጠቀማሉ።

Placeholder Image cap
የካርድ ርዕስ

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

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

Placeholder Image cap
የካርድ ርዕስ

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

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

Placeholder Image cap
የካርድ ርዕስ

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

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

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

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

Placeholder Image cap
የካርድ ርዕስ

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

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
Placeholder Image cap
የካርድ ርዕስ

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

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
Placeholder Image cap
የካርድ ርዕስ

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

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
html 
<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>

የፍርግርግ ካርዶች

በየረድፉ ምን ያህል የፍርግርግ አምዶች (በካርዶችዎ ዙሪያ የተጠቀለሉ) እንደሚያሳዩ ለመቆጣጠር የBootstrap ግሪድ ሲስተም እና ክፍሎቹን ይጠቀሙ .row-cols። ለምሳሌ .row-cols-1ካርዶቹን በአንድ አምድ ላይ መዘርጋት እና .row-cols-md-2አራት ካርዶችን በበርካታ ረድፎች እኩል ስፋት መክፈሉ ከመካከለኛው መሰባበር ነጥብ ወደ ላይ ነው።

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

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

ይቀይሩት .row-cols-3እና አራተኛውን የካርድ መጠቅለያ ያያሉ።

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

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

እኩል ቁመት ሲፈልጉ .h-100ወደ ካርዶቹ ይጨምሩ. በነባሪ እኩል ቁመት ከፈለጉ፣ $card-height: 100%በ Sass ውስጥ ማዘጋጀት ይችላሉ።

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

ይህ አጭር ካርድ ነው።

Placeholder Image cap
የካርድ ርዕስ

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

Placeholder Image cap
የካርድ ርዕስ

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

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

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

Placeholder Image cap
የካርድ ርዕስ

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

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
Placeholder Image cap
የካርድ ርዕስ

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

መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
Placeholder Image cap
የካርድ ርዕስ

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

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

ሜሶነሪ

እንደ ሜሶነሪv4 -እንደ አምዶች ባህሪን ለመኮረጅ የCSS-ብቻ ቴክኒክን ተጠቅመን ነበር ፣ ነገር ግን ይህ ዘዴ ብዙ ደስ የማይል የጎንዮሽ ጉዳቶችን ይዞ መጥቷል ። የዚህ አይነት አቀማመጥ በ ውስጥ እንዲኖርዎት ከፈለጉ ሜሶነሪ ተሰኪን ብቻ መጠቀም ይችላሉ። ሜሶነሪ በ Bootstrap ውስጥ አልተካተተም ነገር ግን ለመጀመር እንዲረዳዎ የማሳያ ምሳሌ አዘጋጅተናል።v5

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ ካርዶች አሁን .cardለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

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

Sass ተለዋዋጮች

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