Source

कार्ड्स्

Bootstrap इत्यस्य कार्ड्स् बहुभिः रूपैः विकल्पैः च सह लचीलं विस्तारणीयं च सामग्रीपात्रं प्रदास्यन्ति ।

विषये

कार्डं लचीलं विस्तारणीयं च सामग्रीपात्रम् अस्ति । अस्मिन् शीर्षकाणां पादलेखानां च विकल्पाः, विविधाः सामग्रीः, सन्दर्भपृष्ठभूमिवर्णाः, शक्तिशालिनः प्रदर्शनविकल्पाः च सन्ति । यदि भवान् Bootstrap 3 इत्यनेन परिचितः अस्ति तर्हि अस्माकं पुरातनपटलस्य, कूपस्य, लघुचित्रस्य च स्थाने कार्ड्स् भवन्ति । तेषां घटकानां सदृशं कार्यक्षमता कार्ड्स् कृते परिवर्तकवर्गरूपेण उपलभ्यते ।

उदाहरण

कार्ड्स् यथासम्भवं अल्पेन मार्कअपेन शैल्याः च सह निर्मिताः भवन्ति, परन्तु तदपि नियन्त्रणस्य अनुकूलनस्य च एकं टनं वितरितुं प्रबन्धयन्ति। flexbox इत्यनेन निर्मिताः, ते सुलभं संरेखणं प्रदास्यन्ति तथा च अन्यैः Bootstrap घटकैः सह सम्यक् मिश्रणं कुर्वन्ति । तेषां marginपूर्वनिर्धारितरूपेण नास्ति, अतः आवश्यकतानुसारं अन्तराल-उपयोगितायाः उपयोगं कुर्वन्तु ।

अधः मिश्रितसामग्रीयुक्तस्य नियतविस्तारस्य च मूलपत्रस्य उदाहरणम् अस्ति । कार्ड्स् इत्यस्य आरम्भार्थं नियतविस्तारः नास्ति, अतः ते स्वाभाविकतया तस्य मूलतत्त्वस्य पूर्णविस्तारं पूरयिष्यन्ति । अस्माकं विविध आकारविकल्पैः सह एतत् सहजतया अनुकूलितं भवति .

१००%x१८० इति
कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

कुत्रचित् गच्छतु 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

सामग्री प्रकार

कार्ड्स् विविधसामग्रीणां समर्थनं कुर्वन्ति, यत्र चित्राणि, पाठः, सूचीसमूहाः, लिङ्कानि, इत्यादीनि सन्ति । अधः किं समर्थितं तस्य उदाहरणानि सन्ति।

शरीरं

कार्डस्य निर्माणखण्डः भवति .card-body. यदा कदापि कार्डस्य अन्तः गद्दीकृतखण्डस्य आवश्यकता भवति तदा तस्य उपयोगं कुर्वन्तु।

एषः कार्ड्-शरीरस्य अन्तः कश्चन पाठः अस्ति । 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

शीर्षकाणि, पाठः, लिङ्कानि च

कार्ड् शीर्षकाणां उपयोगः टैग् मध्ये योजयित्वा .card-titleभवति । तथैव लिङ्कानि योजिताः भवन्ति, एकस्मिन् टैग् मध्ये <h*>योजयित्वा परस्परं पार्श्वे स्थापिताः भवन्ति ।.card-link<a>

उपशीर्षकाणां उपयोगः टैग् .card-subtitleमध्ये a योजयित्वा भवति । <h*>यदि the .card-titleand the .card-subtitleitems इत्येतत् कस्मिन् अपि द्रव्ये स्थापितं भवति .card-bodyतर्हि कार्डस्य शीर्षकं उपशीर्षकं च सुन्दरं संरेखितम् अस्ति ।

कार्ड शीर्षक
कार्ड उपशीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

कार्ड लिङ्क अन्यः लिङ्कः 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

चित्राणि

.card-img-topकार्डस्य उपरि चित्रं स्थापयति। , इत्यनेन .card-textकार्डे पाठः योजयितुं शक्यते । अन्तः पाठः .card-textमानक HTML टैग् इत्यनेन सह अपि शैलीं कर्तुं शक्यते ।

छवि टोपी [100%x180]।

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

समूहों को सूचीबद्ध करें

फ्लश सूची समूहेन सह कार्डे सामग्रीसूचीः रचयन्तु ।

  • क्रास जस्टो ओडियो
  • Dapibus ac सुविधा in
  • वेस्टिबुलम एट इरोस
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
विशेषतः
  • क्रास जस्टो ओडियो
  • Dapibus ac सुविधा in
  • वेस्टिबुलम एट इरोस
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

पाकशाला सिंक

भवतः आवश्यकं कार्डं निर्मातुं बहुविधसामग्रीप्रकाराः मिश्रयित्वा मेलयित्वा, अथवा सर्वं तत्र क्षिपन्तु । अधः चित्रशैल्याः, खण्डाः, पाठशैल्याः, सूचीसमूहः च दर्शिताः सन्ति—सर्वं नियतविस्तारयुक्ते कार्डे वेष्टितम् ।

छवि टोपी [100%x180]।
कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

  • क्रास जस्टो ओडियो
  • Dapibus ac सुविधा in
  • वेस्टिबुलम एट इरोस
कार्ड लिङ्क अन्यः लिङ्कः 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

कार्डस्य अन्तः वैकल्पिकं शीर्षकं/अथवा पादलेखं योजयन्तु ।

विशेषतः
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-headerकार्ड् हेडर्स् इत्येतत् <h*>एलिमेण्ट्स् मध्ये योजयित्वा स्टाइल् कर्तुं शक्यते ।

विशेषतः
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
उद्धरण

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

Source Title इत्यस्मिन् कश्चन प्रसिद्धः 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
विशेषतः
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु
२ दिन पूर्व 
<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 mixins, अथवा utilities इत्यनेन परिवर्तयितुं शक्नोति ।

ग्रिड मार्कअप का प्रयोग करते हुए

जालस्य उपयोगेन आवश्यकतानुसारं स्तम्भेषु पङ्क्तिषु च कार्ड्स् वेष्टयन्तु ।

विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

उपयोगितानां उपयोगः

कार्डस्य विस्तारं शीघ्रं सेट् कर्तुं अस्माकं मुष्टिभ्यां उपलब्धानां आकारनिर्धारण-उपयोगितायाः उपयोगं कुर्वन्तु ।

कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कड्मल
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कड्मल 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

कस्टम् CSS इत्यस्य उपयोगेन

विस्तारं सेट् कर्तुं स्वस्य शैलीपत्रिकासु अथवा अन्तःरेखाशैल्याः रूपेण कस्टम् CSS इत्यस्य उपयोगं कुर्वन्तु ।

विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

पाठ संरेखण

भवान् शीघ्रमेव कस्यचित् कार्डस्य पाठसंरेखणं परिवर्तयितुं शक्नोति—तस्य सम्पूर्णतया अथवा विशिष्टभागेषु—अस्माकं text align classes इत्यनेन सह ।

विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap इत्यस्य nav घटकैः सह कार्डस्य हेडर (अथवा ब्लॉक्) मध्ये किञ्चित् नेविगेशनं योजयन्तु ।

विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
विशेष उपाधि उपचार

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह।

कुत्रचित् गच्छतु 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

चित्राणि

कार्ड्स् मध्ये चित्रैः सह कार्यं कर्तुं कतिचन विकल्पाः सन्ति । कार्डस्य उभयथान्ते “image caps” योजयितुं, कार्डसामग्रीभिः सह चित्राणि आच्छादयितुं, अथवा केवलं कार्डे चित्रं एम्बेड् कर्तुं चयनं कुर्वन्तु ।

छवि टोपियाँ

शीर्षकस्य पादलेखस्य च सदृशं पत्तकेषु उपरि अधः च “प्रतिबिम्बटोपी”—पत्तेः उपरि अधः वा चित्राणि समाविष्टानि भवितुम् अर्हन्ति ।

१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व

कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व

१००%x१८० इति 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

छवि आच्छादन

एकं चित्रं कार्डपृष्ठभूमिं कृत्वा स्वकार्डस्य पाठं आच्छादयन्तु । चित्रानुसारं भवद्भ्यः अतिरिक्तशैल्याः उपयोगितानां वा आवश्यकता भवेत् वा न वा ।

१००%x२७० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

कार्ड शैलियाँ

कार्ड्स् मध्ये तेषां पृष्ठभूमिः, सीमाः, वर्णः च अनुकूलितुं विविधाः विकल्पाः सन्ति ।

पृष्ठभूमि एवं रंग

कार्डस्य स्वरूपं परिवर्तयितुं पाठस्य पृष्ठभूमिस्य च उपयोगितानां उपयोगं कुर्वन्तु ।

शीर्षकम्
प्राथमिक कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्
माध्यमिक कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्
सफलता कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्
खतरा कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

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

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्
इन्फो कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्
प्रकाश कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्
डार्क कार्ड शीर्षक

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

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

अर्थं योजयितुं वर्णस्य उपयोगः केवलं दृश्यसूचकं प्रदाति, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः – यथा स्क्रीनरीडर्-इत्यादिभ्यः – न प्रसारितं भविष्यति । वर्णेन सूचिता सूचना सामग्रीतः एव स्पष्टा भवति (उदा. दृश्यमानपाठः), अथवा वैकल्पिकसाधनेन समाविष्टा भवति, यथा .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>

Mixins उपयोगिताएँ

भवन्तः आवश्यकतानुसारं कार्ड् हेडर् तथा पादलेखे सीमाः अपि परिवर्तयितुं शक्नुवन्ति, अपि च तेषां background-colorwith इत्यनेन अपसारयितुं शक्नुवन्ति .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>

कार्ड लेआउट

कार्ड्स् अन्तः सामग्रीं स्टाइल् करणस्य अतिरिक्तं, Bootstrap इत्यत्र कार्ड्स् श्रृङ्खलां विन्यस्तं कर्तुं कतिचन विकल्पाः समाविष्टाः सन्ति । तावत्पर्यन्तं एते विन्यासविकल्पाः अद्यापि प्रतिक्रियाशीलाः न सन्ति .

कार्ड समूहाः

कार्ड् समूहानां उपयोगेन कार्ड्स् एकस्य, संलग्नस्य तत्त्वस्य रूपेण समानविस्तारस्य ऊर्ध्वतायाश्च स्तम्भैः सह प्रतिपादयन्तु । कार्ड समूहाः display: flex;स्वस्य एकरूपं आकारं प्राप्तुं उपयुञ्जते।

१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व

१००%x१८० इति
कार्ड शीर्षक

अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।

अन्तिम अद्यतन 3 mins पूर्व

१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । अस्मिन् कार्डे प्रथमापेक्षया अपि दीर्घा सामग्री अस्ति यत् तत् समानोन्नतिक्रिया दर्शयति।

अन्तिम अद्यतन 3 mins पूर्व

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

पादलेखयुक्तानां कार्डसमूहानां उपयोगे तेषां सामग्री स्वयमेव पङ्क्तिबद्धा भविष्यति ।

१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व
१००%x१८० इति
कार्ड शीर्षक

अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।

अन्तिम अद्यतन 3 mins पूर्व
१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । अस्मिन् कार्डे प्रथमापेक्षया अपि दीर्घा सामग्री अस्ति यत् तत् समानोन्नतिक्रिया दर्शयति।

अन्तिम अद्यतन 3 mins पूर्व 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

कार्ड डेक

समानविस्तारस्य ऊर्ध्वतायाः च पत्तकानां समुच्चयस्य आवश्यकता अस्ति ये परस्परं न संलग्नाः सन्ति? कार्ड डेक का प्रयोग करें।

१००%x२०० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठयुक्तं दीर्घतरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व

१००%x२०० इति
कार्ड शीर्षक

अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।

अन्तिम अद्यतन 3 mins पूर्व

१००%x२०० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । अस्मिन् कार्डे प्रथमापेक्षया अपि दीर्घा सामग्री अस्ति यत् तत् समानोन्नतिक्रिया दर्शयति।

अन्तिम अद्यतन 3 mins पूर्व

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

यथा कार्डसमूहेषु, डेक्स् मध्ये कार्ड् पादलेखाः स्वयमेव पङ्क्तिबद्धाः भविष्यन्ति ।

१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

अन्तिम अद्यतन 3 mins पूर्व
१००%x१८० इति
कार्ड शीर्षक

अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।

अन्तिम अद्यतन 3 mins पूर्व
१००%x१८० इति
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । अस्मिन् कार्डे प्रथमापेक्षया अपि दीर्घा सामग्री अस्ति यत् तत् समानोन्नतिक्रिया दर्शयति।

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

कार्ड स्तम्भ

कार्ड्स् केवलं CSS इत्यनेन सह Masonry -सदृशेषु स्तम्भेषु व्यवस्थितं कर्तुं शक्यते यत् तान् .card-columns. columnकार्ड्स् सुलभतया संरेखणाय flexbox इत्यस्य स्थाने CSS गुणैः निर्मिताः भवन्ति । कार्ड्स् उपरितः अधः वामतः दक्षिणतश्च आदेशिताः भवन्ति।

शिरः उपरि ! कार्डस्तम्भैः सह भवतः माइलेजः भिन्नः भवितुम् अर्हति । स्तम्भेषु पत्तकानां भङ्गं निवारयितुं अस्माभिः तान् display: inline-blockयथा column-break-inside: avoidअद्यापि बुलेटप्रूफ समाधानं नास्ति इति सेट् कर्तव्यम् ।

१००%x१६० इति
कार्ड शीर्षकं यत् नूतनपङ्क्तिं प्रति वेष्टयति

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठयुक्तं दीर्घतरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

Source Title इत्यस्मिन् कश्चन प्रसिद्धः
१००%x१६० इति
कार्ड शीर्षक

अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।

अन्तिम अद्यतन 3 mins पूर्व

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat.

Source Title इत्यस्मिन् कश्चन प्रसिद्धः
कार्ड शीर्षक

अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।

अन्तिम अद्यतन 3 mins पूर्व

१००%x२६० इति

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.

Source Title इत्यस्मिन् कश्चन प्रसिद्धः
कार्ड शीर्षक

अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । अस्मिन् कार्डे प्रथमापेक्षया अपि दीर्घा सामग्री अस्ति यत् तत् समानोन्नतिक्रिया दर्शयति।

अन्तिम अद्यतन 3 mins पूर्व

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

कार्डस्तम्भान् अपि विस्तारयितुं अनुकूलितुं च शक्यते केनचित् अतिरिक्तसङ्केतेन सह । अधः दर्शितं वर्गस्य विस्तारः अस्ति यस्य .card-columnsउपयोगेन वयं तस्यैव CSS इत्यस्य उपयोगं कुर्मः—CSS स्तम्भाः— स्तम्भसङ्ख्यां परिवर्तयितुं प्रतिक्रियाशीलस्तरस्य समुच्चयं जनयितुं

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