Bootstrap 5 कार्ड

कार्ड

Bootstrap 5 में कार्ड एक बॉर्डर वाला बॉक्स है, जिसकी सामग्री के चारों ओर कुछ आंतरिक पैडिंग है। यह पृष्ठभूमि रंग, शीर्ष, पाद, सामग्री, रंग आदि विकल्पों को शामिल करता है。

बुनियादी कार्ड

एक बुनियादी कार्ड .card क्लास से बनाया गया, कार्ड की सामग्री में एक .card-body क्लास:

उदाहरण

<div class="card">
  <div class="card-body">बुनियादी कार्ड</div>
</div>

स्वयं एक प्रयोग कीजिए

शीर्ष और पाद

.card-header क्लास को कार्ड को शीर्षक जोड़े,.card-footer क्लास को कार्ड को पाद जोड़े:

उदाहरण

<div class="card">
  <div class="card-header">शीर्ष</div>
  <div class="card-body">सामग्री</div>
  <div class="card-footer">पाद</div>
</div>

स्वयं एक प्रयोग कीजिए

उपभूत कार्ड

कार्ड को पृष्ठभूमि रंग जोड़ने के लिए कृपया उपयोग करें:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

उदाहरण

स्वयं एक प्रयोग कीजिए

शीर्षक, पाठ और लिंक

कृपया .card-title कार्ड शीर्षक को किसी भी शीर्षक एलिमेंट में जोड़ें। अगर <p> एलिमेंट है .card-body अंतिम उप-एलिमेंट (या एकमात्र उप-एलिमेंट), तो .card-text क्लास को द्वारा हटाया जाता है <p> एलिमेंट के नीचे की मार्जिन.card-link किसी भी लिंक को नीला और हॉवर इफेक्ट जोड़ें

उदाहरण

<div class="card">
  <div class="card-body">
    <h4 class="card-title">कार्ड शीर्षक</h4>
    <p class="card-text">कुछ नमूना टेक्स्ट।कुछ नमूना टेक्स्ट।</p>
    <a href="#" class="card-link">कार्ड लिंक</a>
    <a href="#" class="card-link">एक अन्य लिंक</a>
  </div>
</div>

स्वयं एक प्रयोग कीजिए

जोड़ें

कार्ड इमेज .card-img-top या .card-img-bottom जोड़ें <img>इसके द्वारा इमेज को कार्ड के ऊपर या नीचे रखा जा सकता है。

ध्यान दें कि हमने .card-body के बाहर इमेज जोड़ी है, ताकि पूरे चौड़ाई में फैल सके:

उदाहरण

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="कार्ड इमेज">
  <div class="card-body">
    <h4 class="card-title">बिल गेट्स</h4>
    <p class="card-text">बिल गेट्स एक प्रोग्रामर और इंजीनियर है।कुछ नमूना टेक्स्ट।कुछ नमूना टेक्स्ट।</p>
    <a href="#" class="btn btn-primary">पर्सनल प्रोफाइल देखें</a>
  </div>
</div>

स्वयं एक प्रयोग कीजिए

कार्ड इमेज ओवरले

इमेज को कार्ड पृष्ठभूमि में बदलकर इस्तेमाल करें .card-img-overlay इमेज के ऊपर टेक्स्ट जोड़ें:

उदाहरण

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="कार्ड इमेज">
  <div class="card-img-overlay">
    <h4 class="card-title">बिल गेट्स</h4>
    <p class="card-text">कुछ नमूना टेक्स्ट।कुछ नमूना टेक्स्ट।</p>
    <a href="#" class="btn btn-primary">पर्सनल प्रोफाइल देखें</a>
  </div>
</div>

स्वयं एक प्रयोग कीजिए