Source

ڪارڊ

بوٽ اسٽريپ جا ڪارڊ ڪيترن ئي قسمن ۽ اختيارن سان لچڪدار ۽ وسعت وارو مواد ڪنٽينر مهيا ڪن ٿا.

بابت

هڪ ڪارڊ هڪ لچڪدار ۽ وسعت وارو مواد ڪنٽينر آهي. ھن ۾ ھيڊرز ۽ فوٽرز جا اختيار شامل آھن، مواد جو وسيع قسم، پس منظر جا رنگ، ۽ طاقتور ڊسپلي جا اختيار. جيڪڏهن توهان Bootstrap 3 کان واقف آهيو، ڪارڊ اسان جي پراڻي پينلز، ويلز، ۽ ٿمبنيلز کي تبديل ڪندا. انهن حصن جي ساڳي ڪارڪردگي ڪارڊن لاءِ موڊيفائر ڪلاس جي طور تي دستياب آهي.

مثال

ڪارڊ ممڪن طور تي ننڍي مارڪ اپ ۽ انداز سان ٺهيل آهن، پر اڃا تائين ڪنٽرول ۽ ڪسٽمائيزيشن جي هڪ ٽين پهچائڻ جو انتظام ڪن ٿا. flexbox سان ٺهيل، اهي آسان ترتيب ڏيڻ جي آڇ ڪندا آهن ۽ ٻين بوٽ اسٽراپ اجزاء سان چڱي طرح ملن ٿا. انھن وٽ marginڊفالٽ ڪونھي، تنھنڪري ضرورت مطابق اسپيسنگ يوٽيلٽيز استعمال ڪريو .

هيٺ ڏنل هڪ بنيادي ڪارڊ جو هڪ مثال آهي مخلوط مواد سان ۽ هڪ مقرر ويڪر. ڪارڊن کي شروع ڪرڻ لاءِ ڪا مقرر چوٿائي نه هوندي آهي، تنهن ڪري اهي قدرتي طور تي ان جي بنيادي عنصر جي مڪمل چوٽي ڀريندا. اهو آساني سان اسان جي مختلف سائز جي اختيارن سان ترتيب ڏنل آهي .

100%x180
ڪارڊ عنوان

ڪارڊ جي عنوان تي تعمير ڪرڻ ۽ ڪارڊ جي مواد جو وڏو حصو ٺاهڻ لاء ڪجهه تڪڙو مثال ٽيڪسٽ.

ڪيڏانهن وڃ
<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. ان کي استعمال ڪريو جڏهن توهان کي ڪارڊ جي اندر هڪ padded حصي جي ضرورت آهي.

هي ڪجهه متن آهي ڪارڊ جي اندر اندر.
<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="..." 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 تي ويسٽيبولم
<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 تي ويسٽيبولم
<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 تي ويسٽيبولم
<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>
اقتباس

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شروع ڪرڻ لاءِ ڪو خاص فرض نه ٿا ڪن، تنهن ڪري اهي 100% ويڪرا هوندا جيستائين ٻي صورت ۾ بيان نه ڪيو وڃي. توھان ھن کي تبديل ڪري سگھوٿا جيئن ضرورت مطابق سي ايس ايس، گرڊ ڪلاس، گرڊ ساس ميڪسينز، يا يوٽيلٽيز.

گرڊ مارڪ اپ استعمال ڪندي

گرڊ استعمال ڪندي، ڪارڊ کي ڪالمن ۽ قطار ۾ لفاف ڪريو جيئن ضرورت هجي.

خاص عنوان علاج

اضافي مواد ۾ قدرتي ليڊ-ان جي طور تي هيٺ ڏنل متن جي حمايت سان.

ڪيڏانهن وڃ
خاص عنوان علاج

اضافي مواد ۾ قدرتي ليڊ-ان جي طور تي هيٺ ڏنل متن جي حمايت سان.

ڪيڏانهن وڃ
<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
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

100%x180
<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>

تصوير اوورليز

ھڪڙي تصوير کي ڪارڊ جي پس منظر ۾ ڦيرايو ۽ پنھنجي ڪارڊ جي متن کي مٿي ڪريو. تصوير تي مدار رکندي، توهان کي اضافي انداز يا افاديت جي ضرورت هجي يا نه.

100%x270
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

<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-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;آھن انھن جي يونيفارم sizing حاصل ڪرڻ لاء.

100%x180
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

100%x180
ڪارڊ عنوان

ھي ڪارڊ ھيٺ ڏنل متن کي سپورٽ ڪري ٿو جيئن قدرتي ليڊ-ان اضافي مواد ۾.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

100%x180
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هن ڪارڊ ۾ پهرين کان به وڌيڪ ڊگهو مواد آهي جيڪو ڏيکاريو ته برابر اونچائي واري عمل کي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

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

جڏهن فوٽر سان ڪارڊ گروپ استعمال ڪندي، انهن جو مواد خودڪار طريقي سان قطار ڪندو.

100%x180
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

100%x180
ڪارڊ عنوان

ھي ڪارڊ ھيٺ ڏنل متن کي سپورٽ ڪري ٿو جيئن قدرتي ليڊ-ان اضافي مواد ۾.

100%x180
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هن ڪارڊ ۾ پهرين کان به وڌيڪ ڊگهو مواد آهي جيڪو ڏيکاريو ته برابر اونچائي واري عمل کي.

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

ڪارڊ ڊيڪ

برابر ويڪر ۽ اوچائي ڪارڊ جو هڪ سيٽ جي ضرورت آهي جيڪي هڪ ٻئي سان ڳنڍيل نه آهن؟ ڪارڊ ڊيڪ استعمال ڪريو.

100%x200
ڪارڊ عنوان

ھي ھڪڙو ڊگھو ڪارڊ آھي جنھن ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

100%x200
ڪارڊ عنوان

ھي ڪارڊ ھيٺ ڏنل متن کي سپورٽ ڪري ٿو جيئن قدرتي ليڊ-ان اضافي مواد ۾.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

100%x200
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هن ڪارڊ ۾ پهرين کان به وڌيڪ ڊگهو مواد آهي جيڪو ڏيکاريو ته برابر اونچائي واري عمل کي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

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

بس ڪارڊ گروپن وانگر، ڊيڪ ۾ ڪارڊ فوٽر خودڪار طريقي سان قطار ٿي ويندا.

100%x180
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هي مواد ٿورڙو ڊگهو آهي.

100%x180
ڪارڊ عنوان

ھي ڪارڊ ھيٺ ڏنل متن کي سپورٽ ڪري ٿو جيئن قدرتي ليڊ-ان اضافي مواد ۾.

100%x180
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هن ڪارڊ ۾ پهرين کان به وڌيڪ ڊگهو مواد آهي جيڪو ڏيکاريو ته برابر اونچائي واري عمل کي.

<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 سان ان ۾ لپي .card-columns. ڪارڊ columnآسان ترتيب ڏيڻ لاءِ flexbox جي بدران 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
ڪارڊ عنوان

ھي ڪارڊ ھيٺ ڏنل متن کي سپورٽ ڪري ٿو جيئن قدرتي ليڊ-ان اضافي مواد ۾.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٽيجر پوسوئر ايراٽ.

ماخذ جي عنوان ۾ ڪو مشهور
ڪارڊ عنوان

ھي ڪارڊ ھيٺ ڏنل متن کي سپورٽ ڪري ٿو جيئن قدرتي ليڊ-ان اضافي مواد ۾.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

100%x260

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

ماخذ جي عنوان ۾ ڪو مشهور
ڪارڊ عنوان

ھي ھڪڙو وسيع ڪارڊ آھي جنھن ۾ ھيٺ ڏنل متن کي سپورٽ ڪرڻ لاءِ قدرتي ليڊ-ان اضافي مواد ۾. هن ڪارڊ ۾ پهرين کان به وڌيڪ ڊگهو مواد آهي جيڪو ڏيکاريو ته برابر اونچائي واري عمل کي.

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ

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