मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
Check
in English

कार्ड दिहल गइल बा

बूटस्ट्रैप के कार्ड कई गो वेरिएंट आ विकल्प सभ के साथ एगो लचीला आ बिस्तार योग्य सामग्री कंटेनर उपलब्ध करावे लें।

एह पन्ना पर दिहल गइल बा

बारे में

कार्ड एगो लचीला आ बिस्तार करे लायक सामग्री कंटेनर होला। एह में हेडर आ फुटर सभ के विकल्प, बिबिध किसिम के सामग्री, संदर्भ बैकग्राउंड रंग, आ शक्तिशाली डिस्प्ले विकल्प सभ के सामिल कइल गइल बा। अगर रउआ बूटस्ट्रैप 3 से परिचित बानी त कार्ड हमनी के पुरान पैनल, कुआँ, आ थंबनेल के जगह ले लेला। ओह घटक सभ के समान कामकाज कार्ड सभ खातिर संशोधक वर्ग के रूप में उपलब्ध बा।

उदाहरण

कार्ड के निर्माण कम से कम मार्कअप अवुरी स्टाइल के संगे कईल जाला, लेकिन एकरा बावजूद नियंत्रण अवुरी अनुकूलन के एक टन देवे में कामयाब होखेला। फ्लेक्सबॉक्स के संगे बनल इ आसान संरेखण देवेला अवुरी बाकी बूटस्ट्रैप घटक के संगे बढ़िया से मिलावेला। इनहन के लगे marginडिफ़ॉल्ट रूप से कवनो नइखे, एह से जरूरत के हिसाब से स्पेसिंग यूटिलिटीज के इस्तेमाल करीं।

नीचे मिश्रित सामग्री आ निश्चित चौड़ाई वाला बेसिक कार्ड के उदाहरण दिहल गइल बा। कार्ड सभ के शुरू करे खातिर कौनों निश्चित चौड़ाई ना होला, एह से ई स्वाभाविक रूप से एकरे मूल तत्व के पूरा चौड़ाई भर दीहें। एकरा के हमनी के विभिन्न साइजिंग विकल्प के साथ आसानी से अनुकूलित कईल जा सकेला .

Placeholder Image cap
कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

कहीं जा
एचटीएमएल के बा 
<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. जब भी कार्ड के भीतर गद्देदार खंड के जरूरत होखे त एकर इस्तेमाल करीं।

ई एगो कार्ड के देह के भीतर कुछ पाठ हवे।
एचटीएमएल के बा 
<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में a जोड़ के कइल जाला। <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के मानक एचटीएमएल टैग सभ के साथ भी स्टाइल कइल जा सके ला।

Placeholder Image cap

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

एचटीएमएल के बा 
<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>

समूहन के सूची बनाईं

फ्लश सूची समूह के साथ कार्ड में सामग्री के सूची बनाईं।

  • एगो आइटम बा
  • एगो दूसरा आइटम बा
  • एगो तीसरा आइटम बा
एचटीएमएल के बा 
<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>
फीचर कइल गइल बा
  • एगो आइटम बा
  • एगो दूसरा आइटम बा
  • एगो तीसरा आइटम बा
एचटीएमएल के बा 
<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>
  • एगो आइटम बा
  • एगो दूसरा आइटम बा
  • एगो तीसरा आइटम बा
कार्ड के पाद लेख बा
एचटीएमएल के बा 
<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
कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

  • एगो आइटम बा
  • एगो दूसरा आइटम बा
  • एगो तीसरा आइटम बा
कार्ड लिंक एगो अउरी लिंक बा
एचटीएमएल के बा 
<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>

कार्ड के भीतर वैकल्पिक हेडर आ/या पाद लेख जोड़ीं।

फीचर कइल गइल बा
विशेष शीर्षक के इलाज कइल जाला

अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में नीचे दिहल समर्थन पाठ के साथ।

कहीं जा
एचटीएमएल के बा 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

कार्ड हेडर सभ .card-headerके <h*>तत्व सभ में जोड़ के स्टाइल कइल जा सके ला।

फीचर कइल गइल बा
विशेष शीर्षक के इलाज कइल जाला

अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में नीचे दिहल समर्थन पाठ के साथ।

कहीं जा
एचटीएमएल के बा 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
मोल लगावल

एगो सुप्रसिद्ध उद्धरण, जवन एगो ब्लॉककोट तत्व में होला।

स्रोत शीर्षक में केहू मशहूर बा
एचटीएमएल के बा 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>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 दिन पहिले के बा
एचटीएमएल के बा 
<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 के इस्तेमाल करीं।

विशेष शीर्षक के इलाज कइल जाला

अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में नीचे दिहल समर्थन पाठ के साथ।

कहीं जा
एचटीएमएल के बा 
<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-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>

बूटस्ट्रैप के 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" 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>
विशेष शीर्षक के इलाज कइल जाला

अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में नीचे दिहल समर्थन पाठ के साथ।

कहीं जा
एचटीएमएल के बा 
<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
एचटीएमएल के बा 
<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 मिनट पहिले अपडेट भइल रहे

एचटीएमएल के बा 
<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 मिनट पहिले अपडेट भइल रहे

एचटीएमएल के बा 
<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}

हेडर के बा
प्राथमिक कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
माध्यमिक कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
सफलता कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
खतरा कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
चेतावनी कार्ड के शीर्षक बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
इन्फो कार्ड के शीर्षक बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
लाइट कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
डार्क कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

एचटीएमएल के बा 
<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या कार्ड के सामग्री के एगो सबसेट पर नीचे देखावल गइल बा।

हेडर के बा
प्राथमिक कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
माध्यमिक कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
सफलता कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
खतरा कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
चेतावनी कार्ड के शीर्षक बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
इन्फो कार्ड के शीर्षक बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
लाइट कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

हेडर के बा
डार्क कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

एचटीएमएल के बा 
<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।

हेडर के बा
सफलता कार्ड के टाइटिल बा

कार्ड के टाइटिल पर बनावे खातिर कुछ त्वरित उदाहरण पाठ आ कार्ड के सामग्री के बड़हन हिस्सा बनावे खातिर।

पाद लेख के बा
एचटीएमएल के बा 
<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 मिनट पहिले अपडेट भइल रहे

एचटीएमएल के बा 
<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 मिनट पहिले अपडेट भइल रहे
एचटीएमएल के बा 
<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>

ग्रिड कार्ड के बा

बूटस्ट्रैप ग्रिड सिस्टम आ एकरे .row-colsक्लास सभ के इस्तेमाल एह बात के नियंत्रित करे खातिर करीं कि रउआँ प्रति पंक्ति केतना ग्रिड कॉलम (रउआ कार्ड सभ के चारों ओर लपेटल) देखावत बानी। उदाहरण खातिर, इहाँ .row-cols-1एक कॉलम पर कार्ड सभ के बिछावल बा, आ .row-cols-md-2चार गो कार्ड सभ के कई पंक्ति सभ में बराबर चौड़ाई में बिभाजित कइल गइल बा, मध्यम ब्रेकपॉइंट से ऊपर।

Placeholder Image cap
कार्ड के टाइटिल बा

ई एगो लंबा कार्ड हवे जेह में नीचे सहायक पाठ बा जे अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में बा। ई सामग्री तनी लमहर बा.

Placeholder Image cap
कार्ड के टाइटिल बा

ई एगो लंबा कार्ड हवे जेह में नीचे सहायक पाठ बा जे अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में बा। ई सामग्री तनी लमहर बा.

Placeholder Image cap
कार्ड के टाइटिल बा

ई एगो लंबा कार्ड हवे जेह में नीचे सहायक पाठ बा जे अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में बा।

Placeholder Image cap
कार्ड के टाइटिल बा

ई एगो लंबा कार्ड हवे जेह में नीचे सहायक पाठ बा जे अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में बा। ई सामग्री तनी लमहर बा.

एचटीएमएल के बा 
<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
कार्ड के टाइटिल बा

ई एगो लंबा कार्ड हवे जेह में नीचे सहायक पाठ बा जे अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में बा। ई सामग्री तनी लमहर बा.

एचटीएमएल के बा 
<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
कार्ड के टाइटिल बा

ई एगो लंबा कार्ड हवे जेह में नीचे सहायक पाठ बा जे अतिरिक्त सामग्री के प्राकृतिक लीड-इन के रूप में बा। ई सामग्री तनी लमहर बा.

एचटीएमएल के बा 
<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 मिनट पहिले अपडेट भइल रहे
एचटीएमएल के बा 
<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-only तकनीक के इस्तेमाल कईनी जा , लेकिन इ तकनीक बहुत अप्रिय दुष्प्रभाव के संगे आईल . अगर रउआ एह प्रकार के लेआउट में होखे के चाहत बानी त रउआ बस मेसनरी प्लगइन के इस्तेमाल कर सकेनी। चिनाई बूटस्ट्रैप में शामिल नइखे , लेकिन हमनी के एगो डेमो उदाहरण बनवले बानी जा ताकि रउआ के शुरू करे में मदद मिल सके।v5

सीएसएस के बा

चर के बारे में बतावल गइल बा

v5.2.0 में जोड़ल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, कार्ड अब .cardबढ़ल रियल-टाइम कस्टमाइजेशन खातिर लोकल सीएसएस चर ऑन के इस्तेमाल करे लें। 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};

ससस चर के बारे में बतावल गइल बा

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