Source

ካርዶች

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

ስለ

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

ለምሳሌ

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

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

100% x180
የካርድ ርዕስ

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

የሆነ ቦታ ሂድ 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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=".../100px180/?text=Image cap" 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=".../100px180/?text=Image cap" 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=".../100px180/" 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=".../100px180/" alt="Card image cap">
</div>

የምስል ተደራቢዎች

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

100% x270
የካርድ ርዕስ

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>
ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Border

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

100% x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100% x180
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100% x180
Card title

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.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

When using card groups with footers, their content will automatically line up.

100% x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
100% x180
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
100% x180
Card title

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.

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

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

100% x200
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100% x200
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100% x200
Card title

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.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

Just like with card groups, card footers in decks will automatically line up.

100% x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
100% x180
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
100% x180
Card title

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.

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

Card columns

ካርዶችን ወደ ሜሶነሪ -እንደ አምዶች በ 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=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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>

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

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