मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

कार्ड्स्

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

विषये

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

उदाहरण

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

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

Placeholder Image cap
कार्ड शीर्षक

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

कुत्रचित् गच्छतु
html
<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. यदा कदापि कार्डस्य अन्तः गद्दीकृतखण्डस्य आवश्यकता भवति तदा तस्य उपयोगं कुर्वन्तु।

एषः कार्ड्-शरीरस्य अन्तः कश्चन पाठः अस्ति ।
html
<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तर्हि कार्डस्य शीर्षकं उपशीर्षकं च सुन्दरं संरेखितम् अस्ति ।

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

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

कार्ड लिङ्क अन्यः लिङ्कः
html
<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 टैग् इत्यनेन सह अपि शैलीं कर्तुं शक्यते ।

Placeholder Image cap

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

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

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

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

  • एकं द्रव्यम्
  • द्वितीयः द्रव्यः
  • तृतीयः द्रव्यः
html
<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>
विशेषतः
  • एकं द्रव्यम्
  • द्वितीयः द्रव्यः
  • तृतीयः द्रव्यः
html
<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>
  • एकं द्रव्यम्
  • द्वितीयः द्रव्यः
  • तृतीयः द्रव्यः
html
<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
कार्ड शीर्षक

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

  • एकं द्रव्यम्
  • द्वितीयः द्रव्यः
  • तृतीयः द्रव्यः
html
<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>

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

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

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

कुत्रचित् गच्छतु
html
<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*>एलिमेण्ट्स् मध्ये योजयित्वा स्टाइल् कर्तुं शक्यते ।

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

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

कुत्रचित् गच्छतु
html
<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>
उद्धरण

एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।

Source Title इत्यस्मिन् कश्चन प्रसिद्धः
html
<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>
विशेषतः
विशेष उपाधि उपचार

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

कुत्रचित् गच्छतु
html
<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 इत्यनेन परिवर्तयितुं शक्नोति ।

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

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

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

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

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

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

कुत्रचित् गच्छतु
html
<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>

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

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

कार्ड शीर्षक

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

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

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

कड्मल
html
<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 इत्यस्य उपयोगं कुर्वन्तु ।

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

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

कुत्रचित् गच्छतु
html
<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 इत्यनेन सह ।

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

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

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

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

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

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

कुत्रचित् गच्छतु
html
<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>

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

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

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

कुत्रचित् गच्छतु
html
<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>
विशेष उपाधि उपचार

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

कुत्रचित् गच्छतु
html
<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>

चित्राणि

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

छवि टोपियाँ

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

Placeholder Image cap
कार्ड शीर्षक

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

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

कार्ड शीर्षक

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

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

Placeholder Image cap
html
<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 mins पूर्व

html
<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>
ध्यानं कुर्वन्तु यत् सामग्री चित्रस्य ऊर्ध्वतायाः अपेक्षया अधिका न भवेत् । यदि सामग्री चित्रात् बृहत्तरं भवति तर्हि सामग्री चित्रात् बहिः प्रदर्शिता भविष्यति।

क्षैतिज

ग्रिड् तथा उपयोगितावर्गयोः संयोजनस्य उपयोगेन कार्ड्स् क्षैतिजरूपेण मोबाईल-अनुकूलतया प्रतिक्रियाशीलतया च कर्तुं शक्यते । अधोलिखिते उदाहरणे वयं grid gutters इत्यनेन सह निष्कास्य classes इत्यस्य .g-0उपयोगेन कार्ड् इत्येतत् breakpoint .col-md-*इत्यत्र क्षैतिजं कर्तुं शक्नुमः । mdभवतः कार्डस्य सामग्रीयाः आधारेण अधिकसमायोजनस्य आवश्यकता भवितुम् अर्हति ।

Placeholder Image
कार्ड शीर्षक

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html
<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अथवा कार्डस्य सामग्रीयाः उपसमूहे वर्गान् स्थापयितुं शक्नोति यथा अधः दर्शितम् अस्ति ।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mixins उपयोगिताएँ

भवन्तः आवश्यकतानुसारं कार्ड् हेडर् तथा पादलेखे सीमाः अपि परिवर्तयितुं शक्नुवन्ति, अपि च तेषां background-colorwith इत्यनेन अपसारयितुं शक्नुवन्ति .bg-transparent

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

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

html
<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;आरभ्य एकरूपपरिमाणैः सह संलग्नाः भवितुम् उपयुज्यन्ते।sm

Placeholder Image cap
कार्ड शीर्षक

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

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

Placeholder Image cap
कार्ड शीर्षक

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

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

Placeholder Image cap
कार्ड शीर्षक

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

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

html
<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
कार्ड शीर्षक

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

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

ग्रिड कार्ड

प्रतिपङ्क्तौ भवन्तः कियन्तः जालस्तम्भाः (भवतः कार्ड्स् परितः वेष्टिताः) दर्शयन्ति इति नियन्त्रयितुं Bootstrap जालप्रणाल्याः तस्य .row-colsवर्गानां च उपयोगं कुर्वन्तु । यथा, अत्र .row-cols-1एकस्मिन् स्तम्भे पत्तकानि विन्यस्य, मध्यमविच्छेदबिन्दुतः उपरि .row-cols-md-2चत्वारि पत्तकानि समानविस्तारं बहुपङ्क्तिषु विभज्य

Placeholder Image cap
कार्ड शीर्षक

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

Placeholder Image cap
कार्ड शीर्षक

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

Placeholder Image cap
कार्ड शीर्षक

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

Placeholder Image cap
कार्ड शीर्षक

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

html
<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
कार्ड शीर्षक

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

html
<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
कार्ड शीर्षक

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

html
<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
कार्ड शीर्षक

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

Placeholder Image cap
कार्ड शीर्षक

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

Placeholder Image cap
कार्ड शीर्षक

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

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

चिनाई

In वयं Masonryv4 -सदृशस्तम्भानां व्यवहारस्य अनुकरणार्थं केवलं CSS-प्रविधिनाम् उपयोगं कृतवन्तः , परन्तु एषा तकनीकः बहुभिः अप्रियदुष्प्रभावैः सह आगता . यदि भवान् इच्छति यत् एतादृशं विन्यासं , तर्हि भवान् केवलं Masonry plugin इत्यस्य उपयोगं कर्तुं शक्नोति । Bootstrap इत्यस्मिन् Masonry न समाविष्टम् , परन्तु वयं भवन्तं आरम्भं कर्तुं साहाय्यं कर्तुं एकं डेमो उदाहरणं कृतवन्तः।v5

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य CSS चर-पद्धतेः भागत्वेन, कार्ड्स् इदानीं .cardवर्धित-वास्तविक-समय-अनुकूलनार्थं स्थानीय-CSS-चर-इत्यस्य उपयोगं कुर्वन्ति । 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;