Source

कार्डहरू

बुटस्ट्र्यापका कार्डहरूले बहुविध भेरियन्टहरू र विकल्पहरूसँग लचिलो र एक्स्टेन्सिबल सामग्री कन्टेनर प्रदान गर्दछ।

बारे

कार्ड एक लचिलो र एक्स्टेन्सिबल सामग्री कन्टेनर हो। यसमा हेडर र फुटरहरू, सामग्रीको विस्तृत विविधता, प्रासंगिक पृष्ठभूमि रङहरू, र शक्तिशाली प्रदर्शन विकल्पहरू समावेश छन्। यदि तपाईं Bootstrap 3 सँग परिचित हुनुहुन्छ भने, कार्डहरूले हाम्रा पुराना प्यानलहरू, कुवाहरू, र थम्बनेलहरू प्रतिस्थापन गर्छन्। ती कम्पोनेन्टहरूसँग समान प्रकार्यता कार्डहरूको लागि परिमार्जक वर्गहरूको रूपमा उपलब्ध छ।

उदाहरण

कार्डहरू सकेसम्म थोरै मार्कअप र शैलीहरूसँग बनाइएका छन्, तर अझै पनि नियन्त्रण र अनुकूलनको एक टन प्रदान गर्न प्रबन्ध गर्नुहोस्। फ्लेक्सबक्सको साथ निर्मित, तिनीहरूले सजिलो पङ्क्तिबद्धता प्रस्ताव गर्छन् र अन्य बुटस्ट्र्याप घटकहरूसँग राम्रोसँग मिलाउँछन्। तिनीहरूसँग marginपूर्वनिर्धारित रूपमा कुनै छैन, त्यसैले आवश्यकता अनुसार स्पेसिङ उपयोगिताहरू प्रयोग गर्नुहोस्।

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

100%x180
कार्ड शीर्षक

कार्डको शीर्षकमा निर्माण गर्न र कार्डको सामग्रीको ठूलो भाग बनाउनको लागि केही द्रुत उदाहरण पाठ।

कतै जानुहोस्
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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प्रयोग गरिन्छ । <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मानक HTML ट्यागहरूसँग पनि स्टाइल गर्न सकिन्छ।

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

कार्डको शीर्षकमा निर्माण गर्न र कार्डको सामग्रीको ठूलो भाग बनाउनको लागि केही द्रुत उदाहरण पाठ।

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

समूहहरू सूचीबद्ध गर्नुहोस्

फ्लश सूची समूहको साथ कार्डमा सामग्रीको सूचीहरू सिर्जना गर्नुहोस्।

  • Cras justo odio
  • Dapibus ac facilisis in
  • eros मा Vestibulum
<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>
चित्रित
  • Cras justo odio
  • Dapibus ac facilisis in
  • eros मा Vestibulum
<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]
कार्ड शीर्षक

कार्डको शीर्षकमा निर्माण गर्न र कार्डको सामग्रीको ठूलो भाग बनाउनको लागि केही द्रुत उदाहरण पाठ।

  • Cras justo odio
  • Dapibus ac facilisis in
  • eros मा Vestibulum
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>
उद्धरण

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.

स्रोत शीर्षकमा प्रसिद्ध कोही
<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, त्यसैले तिनीहरू १००% चौडा हुनेछन् जबसम्म अन्यथा भनिएको छैन। तपाईंले यसलाई अनुकूलन 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 प्रयोग गर्दै

चौडाइ सेट गर्न आफ्नो स्टाइलसिटमा वा इनलाइन शैलीहरूको रूपमा अनुकूलन 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>

बुटस्ट्र्यापको एनएभ कम्पोनेन्टहरूसँग कार्डको हेडर (वा ब्लक) मा केही नेभिगेसन थप्नुहोस् ।

विशेष शीर्षक उपचार

अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ।

कतै जानुहोस्
<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>

छविहरू

कार्डहरूले छविहरूसँग काम गर्नका लागि केही विकल्पहरू समावेश गर्दछ। कार्डको कुनै पनि छेउमा "छवि क्याप्स" थप्ने, कार्ड सामग्रीको साथ छविहरू ओभरले गर्ने, वा कार्डमा छवि इम्बेड गर्नबाट छनौट गर्नुहोस्।

छवि क्याप्स

हेडर र फुटरहरू जस्तै, कार्डहरूले माथि र तल "छवि क्याप्स" समावेश गर्न सक्छ - कार्डको माथि वा तल छविहरू।

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो सामग्री अलि लामो छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो सामग्री अलि लामो छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

100%x180
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" 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=".../100px180/" alt="Card image cap">
</div>

छवि ओभरले

छविलाई कार्डको पृष्ठभूमिमा बदल्नुहोस् र आफ्नो कार्डको पाठ ओभरले गर्नुहोस्। छविमा निर्भर गर्दै, तपाईंलाई अतिरिक्त शैलीहरू वा उपयोगिताहरू आवश्यक पर्न सक्छ वा नहुन सक्छ।

100%x270
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो सामग्री अलि लामो छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

मिक्सन उपयोगिताहरू

तपाईंले कार्ड हेडर र फुटरमा आवश्यक पर्ने सीमानाहरू पनि परिवर्तन गर्न सक्नुहुन्छ, र तिनीहरूलाई 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;आफ्नो समान आकार प्राप्त गर्न प्रयोग गर्छन्।

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो सामग्री अलि लामो छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

100%x180
कार्ड शीर्षक

यस कार्डमा अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तलको पाठलाई समर्थन गरिएको छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो कार्डमा समान उचाइ कार्य देखाउने पहिलो भन्दा अझ लामो सामग्री छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

फुटरहरूसँग कार्ड समूहहरू प्रयोग गर्दा, तिनीहरूको सामग्री स्वचालित रूपमा लाइन अप हुनेछ।

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो सामग्री अलि लामो छ।

100%x180
कार्ड शीर्षक

यस कार्डमा अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तलको पाठलाई समर्थन गरिएको छ।

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो कार्डमा समान उचाइ कार्य देखाउने पहिलो भन्दा अझ लामो सामग्री छ।

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

कार्ड डेक

बराबर चौडाइ र उचाइ कार्डहरूको सेट चाहिन्छ जुन एकअर्कासँग जोडिएको छैन? कार्ड डेक प्रयोग गर्नुहोस्।

100%x200
कार्ड शीर्षक

यो अतिरिक्त सामग्रीको लागि प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ लामो कार्ड हो। यो सामग्री अलि लामो छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

100%x200
कार्ड शीर्षक

यस कार्डमा अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तलको पाठलाई समर्थन गरिएको छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

100%x200
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो कार्डमा समान उचाइ कार्य देखाउने पहिलो भन्दा अझ लामो सामग्री छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

कार्ड समूहहरूसँग जस्तै, डेकहरूमा कार्ड फुटरहरू स्वचालित रूपमा लाइन अप हुनेछन्।

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो सामग्री अलि लामो छ।

100%x180
कार्ड शीर्षक

यस कार्डमा अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तलको पाठलाई समर्थन गरिएको छ।

100%x180
कार्ड शीर्षक

यो अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ फराकिलो कार्ड हो। यो कार्डमा समान उचाइ कार्य देखाउने पहिलो भन्दा अझ लामो सामग्री छ।

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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 मार्फत व्यवस्थित गर्न सकिन्छ .card-columns। कार्डहरू columnसजिलो पङ्क्तिबद्धताको लागि फ्लेक्सबक्सको सट्टा CSS गुणहरूसँग बनाइन्छ। कार्डहरू माथि देखि तल र बायाँ देखि दायाँ क्रमबद्ध छन्।

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

100%x160
कार्ड शीर्षक जुन नयाँ लाइनमा लपेट्छ

यो अतिरिक्त सामग्रीको लागि प्राकृतिक नेतृत्वको रूपमा तल समर्थन पाठको साथ लामो कार्ड हो। यो सामग्री अलि लामो छ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.

स्रोत शीर्षकमा प्रसिद्ध कोही
100%x160
कार्ड शीर्षक

यस कार्डमा अतिरिक्त सामग्रीमा प्राकृतिक नेतृत्वको रूपमा तलको पाठलाई समर्थन गरिएको छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

Lorem ipsum dolor sit amet, consectetur adipiscing elit। पूर्णाङ्क स्थिति।

स्रोत शीर्षकमा प्रसिद्ध कोही
कार्ड शीर्षक

यो कार्डमा नियमित शीर्षक र यसको तल पाठको छोटो अनुच्छेद छ।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.

स्रोत शीर्षकमा प्रसिद्ध कोही
कार्ड शीर्षक

यो तल शीर्षक र समर्थन पाठ संग अर्को कार्ड हो। यो कार्डलाई समग्रमा थोरै अग्लो बनाउनको लागि केही अतिरिक्त सामग्रीहरू छन्।

पछिल्लो पटक ३ मिनेट पहिले अपडेट गरिएको थियो

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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;
  }
}