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>
फीचर कइल गइल बा
विशेष शीर्षक के इलाज कइल जाला

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

कहीं जा
<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-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>

बूटस्ट्रैप के 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">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 bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
ध्यान रहे कि सामग्री छवि के ऊँचाई से बड़ ना होखे के चाहीं। अगर सामग्री छवि से बड़ होखे त सामग्री छवि के बाहर देखावल जाई।

क्षैतिज

ग्रिड आ यूटिलिटी क्लास के संयोजन के इस्तेमाल से कार्ड के मोबाइल-फ्रेंडली आ रिस्पांसिव तरीका से क्षैतिज बनावल जा सके ला। नीचे दिहल उदाहरण में, हमनी के ग्रिड गटर के साथ हटावेनी जा आ ब्रेकपॉइंट पर कार्ड के क्षैतिज बनावे खातिर क्लास के .no-guttersइस्तेमाल करेनी जा। आपके कार्ड के सामग्री के आधार प अवुरी समायोजन के जरूरत पड़ सकता।.col-md-*md

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

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

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

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

कार्ड के स्टाइल के बा

कार्ड सभ में इनहन के बैकग्राउंड, बॉर्डर, आ रंग के अनुकूलित करे खातिर बिबिध विकल्प सभ के सामिल कइल जाला।

पृष्ठभूमि आ रंग के बारे में बतावल गइल बा

कार्ड के रूप बदले खातिर टेक्स्ट आ बैकग्राउंड यूटिलिटीज के इस्तेमाल करीं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
सहायक प्रौद्योगिकी के अर्थ संप्रेषित कइल

अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिलेला, जवन सहायक तकनीक के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (जइसे कि दृश्यमान पाठ), या फिर वैकल्पिक तरीका से शामिल कइल गइल होखे, जइसे कि .sr-onlyक्लास के साथ छिपल अतिरिक्त पाठ।

सरहद

कार्ड के बस बदले खातिर सीमा उपयोगिता के इस्तेमाल करीं . border-colorध्यान दीं कि रउआँ .text-{color}पैरेंट पर क्लास डाल सकत बानी .cardया कार्ड के सामग्री के एगो सबसेट पर नीचे देखावल गइल बा।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

मिक्सिन के उपयोगिता के बारे में बतावल गइल बा

रउआँ जरूरत के हिसाब से कार्ड हेडर आ फुटर पर सीमा भी बदल सकत बानी, आ इहाँ तक कि इनहन background-colorके के साथ हटा सकत बानी .bg-transparent

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

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

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

कार्ड के लेआउट के बारे में बतावल गइल बा

कार्ड के भीतर सामग्री के स्टाइल करे के अलावा, बूटस्ट्रैप में कार्ड के सीरीज बिछावे खातिर कुछ विकल्प भी शामिल बा। फिलहाल इ लेआउट विकल्प अभी तक रिस्पांसिव नईखे भईल .

कार्ड समूह के बा

कार्ड समूह सभ के इस्तेमाल कार्ड सभ के एकल, संलग्न तत्व के रूप में रेंडर करे खातिर करीं जेह में बराबर चौड़ाई आ ऊँचाई के कॉलम होखे। कार्ड समूह ढेर हो के शुरू होला आ ब्रेकपॉइंट display: flex;से शुरू होखे वाला एक समान आयाम के साथ जुड़ल होखे खातिर इस्तेमाल होला ।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
कार्ड के टाइटिल बा

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

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

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

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

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

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

कार्ड डेक के बा

बराबर चौड़ाई आ ऊंचाई वाला कार्ड के सेट के जरूरत बा जवन एक दोसरा से ना जुड़ल होखे? कार्ड डेक के इस्तेमाल करीं।

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

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

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

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

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

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

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

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

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

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

ठीक ओइसहीं जइसे कार्ड ग्रुप के साथ होला, डेक में कार्ड फुटर अपने आप लाइन में लाग जाई।

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

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

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

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

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

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

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

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

बूटस्ट्रैप ग्रिड सिस्टम आ एकरे .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">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

एकरा के बदल के .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">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

जब रउरा बराबर ऊँचाई के जरूरत होखे .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">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

कार्ड के कॉलम के बारे में बतावल गइल बा

कार्ड के खाली सीएसएस के साथ चिनाई.card-columns निहन कॉलम में संगठित कईल जा सकता, ओकरा के . कार्ड सभ के फ्लेक्सबॉक्स के बजाय सीएसएस columnगुण सभ के साथ बनावल जाला ताकि आसानी से संरेखण हो सके। कार्ड ऊपर से नीचे आ बाएँ से दाएँ मंगावल जाला।

हेड अप हो गइल बा! कार्ड कॉलम के संगे आपके माइलेज अलग-अलग हो सकता। कॉलम के पार कार्ड टूटे से रोके खातिर हमनी के ओकरा के सेट करे के होई display: inline-blockजईसे column-break-inside: avoidअभी तक बुलेटप्रूफ समाधान नईखे।

Placeholder Image cap
कार्ड के टाइटिल जवन एगो नया लाइन तक लपेटेला

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

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

स्रोत शीर्षक में केहू मशहूर बा
Placeholder Image cap
कार्ड के टाइटिल बा

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

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

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

स्रोत शीर्षक में केहू मशहूर बा
कार्ड के टाइटिल बा

एह कार्ड के एगो नियमित शीर्षक आ ओकरा नीचे पाठ के छोट पैराग्राफ बा.

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

Placeholder Card image

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

स्रोत शीर्षक में केहू मशहूर बा
कार्ड के टाइटिल बा

ई एगो अउरी कार्ड बा जवना के शीर्षक आ समर्थन पाठ नीचे दिहल गइल बा. एह कार्ड में कुछ अतिरिक्त सामग्री बा जवना से कुल मिलाके एकरा के तनिका लंबा बनावल जा सकेला।

अंतिम बार 3 मिनट पहिले अपडेट भइल रहे

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

कार्ड कॉलम के कुछ अतिरिक्त कोड के साथ भी बढ़ावल आ अनुकूलित कइल जा सके ला। नीचे देखावल गइल बा .card-columnsकि ओही CSS के इस्तेमाल से क्लास के एक्सटेंशन देखावल गइल बा जेकर इस्तेमाल हमनी के इस्तेमाल करे लीं—CSS कॉलम— कॉलम सभ के संख्या बदले खातिर रिस्पांसिव टीयर सभ के सेट जनरेट करे खातिर।

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