مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

ڪارڊ

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

هن صفحي تي

بابت

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

مثال

ڪارڊ ممڪن طور تي ننڍي مارڪ اپ ۽ انداز سان ٺهيل آهن، پر اڃا تائين ڪنٽرول ۽ ڪسٽمائيزيشن جي هڪ ٽين پهچائڻ جو انتظام ڪن ٿا. flexbox سان ٺهيل، اهي آسان ترتيب ڏيڻ جي آڇ ڪندا آهن ۽ ٻين بوٽ اسٽراپ اجزاء سان چڱي طرح ملن ٿا. انھن وٽ 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. ان کي استعمال ڪريو جڏهن توهان کي ڪارڊ جي اندر هڪ padded حصي جي ضرورت آهي.

هي ڪجهه متن آهي ڪارڊ جي اندر اندر.
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ڪرڻ سان. <h*>جيڪڏھن .card-title۽ .card-subtitleشيون ھڪڙي شيون ۾ رکيل آھن .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>
اقتباس

هڪ مشهور اقتباس، هڪ بلاڪ ڪوٽ عنصر ۾ شامل آهي.

ماخذ جي عنوان ۾ ڪو مشهور
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>
نمايان
خاص عنوان علاج

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

ڪيڏانهن وڃ
2 ڏينهن اڳ
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% ويڪرا هوندا جيستائين ٻي صورت ۾ بيان نه ڪيو وڃي. توھان ھن کي تبديل ڪري سگھوٿا جيئن ضرورت مطابق سي ايس ايس، گرڊ ڪلاس، گرڊ ساس ميڪسينز، يا يوٽيلٽيز.

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

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

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

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

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

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

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

متن جي ترتيب

توھان جلدي تبديل ڪري سگھو ٿا ڪنھن به ڪارڊ جي ٽيڪسٽ الائنمينٽ- ان جي پوري يا مخصوص حصن ۾- اسان جي ٽيڪسٽ الائننگ ڪلاسز سان .

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

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

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

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

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

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

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

بوٽ اسٽريپ جي نيو اجزاء سان ڪارڊ جي هيڊر (يا بلاڪ) ۾ ڪجهه نيويگيشن شامل ڪريو .

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

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

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

تصويرون

ڪارڊ ۾ تصويرن سان ڪم ڪرڻ لاءِ ڪجھ اختيار شامل آھن. ڪارڊ جي آخر ۾ ”تصوير ڪيپس“ شامل ڪرڻ مان چونڊيو، ڪارڊ جي مواد سان تصويرن کي اوورلي ڪرڻ، يا صرف تصوير کي ڪارڊ ۾ شامل ڪرڻ.

تصويري ڪيپ

هيڊر ۽ فوٽر وانگر، ڪارڊ ۾ مٿي ۽ هيٺان شامل ٿي سگھي ٿو "تصوير ڪيپ" - تصويرون هڪ ڪارڊ جي مٿين يا هيٺان تي.

Placeholder Image cap
ڪارڊ عنوان

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

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

ڪارڊ عنوان

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

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

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 منٽ اڳ

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>
نوٽ ڪريو ته مواد تصوير جي اوچائي کان وڏي نه هجڻ گهرجي. جيڪڏهن مواد تصوير کان وڏو آهي ته مواد تصوير کان ٻاهر ڏيکاريو ويندو.

افقي

گرڊ ۽ يوٽيلٽي ڪلاس جي ميلاپ کي استعمال ڪندي، ڪارڊ کي موبائل دوستانه ۽ جوابي انداز ۾ افقي طور تي ٺاهي سگھجن ٿا. هيٺ ڏنل مثال ۾، اسان گرڊ گٽر کي هٽايو ٿا .g-0۽ ڪلاس استعمال ڪريون ٿا .col-md-*ڪارڊ کي mdبريڪ پوائنٽ تي افقي ڪرڻ لاءِ. توهان جي ڪارڊ جي مواد جي بنياد تي وڌيڪ ترميمن جي ضرورت پوندي.

Placeholder Image
ڪارڊ عنوان

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

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

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-colorٿا .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>

ڪارڊ جي ترتيب

ڪارڊن ۾ مواد کي اسٽائل ڪرڻ کان علاوه، بوٽ اسٽريپ ۾ ڪارڊ جي سيريز کي ترتيب ڏيڻ لاء ڪجھ اختيار شامل آھن. هن وقت تائين، اهي ترتيب جا اختيار اڃا تائين جوابدار نه آهن .

ڪارڊ گروپ

استعمال ڪريو ڪارڊ گروپن کي ڪارڊ ڏيڻ لاءِ ھڪڙي ھڪڙي، منسلڪ عنصر جي برابر ويڪر ۽ اونچائي ڪالمن سان. ڪارڊ گروپن کي اسٽيڪ ٿيل شروع ڪيو وڃي ٿو ۽ بريڪ پوائنٽ display: flex;تي شروع ٿيندڙ يونيفارم طول و عرض سان ڳنڍيل ٿيڻ لاء استعمال ڪريو.sm

Placeholder Image cap
ڪارڊ عنوان

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

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

Placeholder Image cap
ڪارڊ عنوان

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

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

Placeholder Image cap
ڪارڊ عنوان

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

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

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
ڪارڊ عنوان

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

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

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

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

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

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ
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>

گرڊ ڪارڊ

بوٽ اسٽريپ گرڊ سسٽم ۽ ان .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%ساس ۾.

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
ڪارڊ عنوان

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

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

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

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

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

آخري دفعو اپڊيٽ ڪيو ويو 3 منٽ اڳ
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>

معمار

ان ۾ v4اسان هڪ CSS-صرف ٽيڪنڪ استعمال ڪئي آهي معمار جي طرز جي ڪالمن جي رويي کي نقل ڪرڻ لاءِ، پر اها ٽيڪنڪ ڪيترن ئي ناپسنديده ضمني اثرات سان آئي . جيڪڏهن توهان چاهيو ٿا ته هن قسم جي ترتيب ۾ v5، توهان صرف استعمال ڪري سگهو ٿا معمار پلگ ان. Bootstrap ۾ معمار شامل نه آهي ، پر اسان توهان کي شروع ڪرڻ ۾ مدد لاءِ هڪ ڊيمو مثال ٺاهيو آهي.

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي يافته CSS متغير جي نقطي جي حصي جي طور تي، ڪارڊ ھاڻي مقامي CSS متغير استعمال ڪن ٿا .cardوڌايل حقيقي وقت جي ڪسٽمائيزيشن لاءِ. 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;