बूटस्ट्रैप 4 कार्ड
पत्ते
बूटस्ट्रैप 4 में एक कार्ड एक बॉर्डर वाला बॉक्स होता है जिसमें इसकी सामग्री के चारों ओर कुछ पैडिंग होती है। इसमें शीर्षलेख, पादलेख, सामग्री, रंग आदि के विकल्प शामिल हैं।
मूल कार्ड
कक्षा के साथ एक मूल कार्ड बनाया जाता है .card, और कार्ड के अंदर की सामग्री में एक .card-bodyवर्ग होता है:
उदाहरण
<div class="card">
<div class="card-body">Basic
card</div>
</div>
यदि आप बूटस्ट्रैप 3 से परिचित हैं, तो कार्ड पुराने पैनल, कुओं और थंबनेल को बदल देते हैं।
शीर्ष लेख और पद लेख
.card-headerवर्ग कार्ड में एक शीर्षक जोड़ता है और वर्ग कार्ड में एक .card-footerपादलेख जोड़ता है:
उदाहरण
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
प्रासंगिक कार्ड
कार्ड में पृष्ठभूमि का रंग जोड़ने के लिए, प्रासंगिक वर्गों ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkऔर .bg-light.
उदाहरण
शीर्षक, टेक्स्ट और लिंक
.card-titleकिसी भी शीर्षक तत्व में कार्ड शीर्षक जोड़ने के लिए उपयोग करें । वर्ग का .card-textउपयोग <p> तत्व के लिए निचले मार्जिन को हटाने के लिए किया जाता है यदि यह अंतिम बच्चा (या केवल एक) अंदर है .card-body। .card-linkवर्ग किसी भी लिंक में नीला रंग और होवर प्रभाव जोड़ता है ।
उदाहरण
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another 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="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
फैला हुआ लिंक
कार्ड के अंदर एक लिंक में कक्षा जोड़ें .stretched-link, और यह पूरे कार्ड को क्लिक करने योग्य और होवर करने योग्य बना देगा (कार्ड एक लिंक के रूप में कार्य करेगा):
उदाहरण
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
कार्ड छवि ओवरले
एक छवि को कार्ड पृष्ठभूमि में बदलें और छवि .card-img-overlay
के शीर्ष पर टेक्स्ट जोड़ने के लिए उपयोग करें:
उदाहरण
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
कार्ड कॉलम
पहले कार्ड के अंदर कुछ पाठ
दूसरे कार्ड के अंदर कुछ पाठ
तीसरे कार्ड के अंदर कुछ पाठ
चौथे कार्ड के अंदर कुछ पाठ
पांचवें कार्ड के अंदर कुछ पाठ
छठे कार्ड के अंदर कुछ पाठ
वर्ग ताश के पत्तों की .card-columnsतरह एक चिनाई जैसा ग्रिड बनाता है (जैसे Pinterest)। जैसे ही आप और कार्ड डालेंगे, लेआउट अपने आप एडजस्ट हो जाएगा।
नोट: कार्ड छोटे स्क्रीन (576px से कम) पर लंबवत रूप से प्रदर्शित होते हैं:
उदाहरण
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
कार्ड डेक
पहले कार्ड के अंदर कुछ पाठ
हाइट बढ़ाने के लिए कुछ और टेक्स्ट
हाइट बढ़ाने के लिए कुछ और टेक्स्ट
हाइट बढ़ाने के लिए कुछ और टेक्स्ट
दूसरे कार्ड के अंदर कुछ पाठ
तीसरे कार्ड के अंदर कुछ पाठ
चौथे कार्ड के अंदर कुछ पाठ
वर्ग समान ऊंचाई और चौड़ाई वाले कार्डों का .card-deckएक ग्रिड बनाता है । जैसे ही आप और कार्ड डालेंगे, लेआउट अपने आप एडजस्ट हो जाएगा।
नोट: कार्ड छोटे स्क्रीन (576px से कम) पर लंबवत रूप से प्रदर्शित होते हैं:
उदाहरण
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
कार्ड समूह
पहले कार्ड के अंदर कुछ पाठ
हाइट बढ़ाने के लिए कुछ और टेक्स्ट
हाइट बढ़ाने के लिए कुछ और टेक्स्ट
हाइट बढ़ाने के लिए कुछ और टेक्स्ट
दूसरे कार्ड के अंदर कुछ पाठ
तीसरे कार्ड के अंदर कुछ पाठ
चौथे कार्ड के अंदर कुछ पाठ
.card-groupवर्ग के समान है .card-deck। अंतर केवल इतना है कि .card-groupवर्ग प्रत्येक कार्ड के बीच बाएँ और दाएँ हाशिये को हटा देता है।
नोट: कार्ड ऊपर और नीचे मार्जिन के साथ छोटी स्क्रीन (576px से कम) पर लंबवत रूप से प्रदर्शित होते हैं :
उदाहरण
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>