Source

کارڈز

بوٹسٹریپ کے کارڈز ایک لچکدار اور قابل توسیع مواد کا کنٹینر فراہم کرتے ہیں جس میں متعدد اقسام اور اختیارات ہوتے ہیں۔

کے بارے میں

کارڈ ایک لچکدار اور قابل توسیع مواد کا کنٹینر ہے۔ اس میں ہیڈر اور فوٹر کے اختیارات، مواد کی وسیع اقسام، پس منظر کے متعلقہ رنگ، اور طاقتور ڈسپلے کے اختیارات شامل ہیں۔ اگر آپ بوٹسٹریپ 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
  • ویسٹیبولم اور ایروز
<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
  • ویسٹیبولم اور ایروز
<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
  • ویسٹیبولم اور ایروز
<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. انٹیجر 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% چوڑے ہوں گے جب تک کہ دوسری صورت میں بیان نہ کیا جائے۔ آپ حسب ضرورت CSS، گرڈ کلاسز، گرڈ ساس مکسنس، یا یوٹیلیٹیز کے ساتھ اسے تبدیل کر سکتے ہیں۔

گرڈ مارک اپ کا استعمال

گرڈ کا استعمال کرتے ہوئے، ضرورت کے مطابق کالموں اور قطاروں میں کارڈ لپیٹیں۔

خصوصی ٹائٹل ٹریٹمنٹ

اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن کے ساتھ۔

کہیں جاؤ
خصوصی ٹائٹل ٹریٹمنٹ

اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن کے ساتھ۔

کہیں جاؤ
<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 استعمال کریں۔

خصوصی ٹائٹل ٹریٹمنٹ

اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن کے ساتھ۔

کہیں جاؤ
<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>

بوٹسٹریپ کے nav اجزاء کے ساتھ کارڈ کے ہیڈر (یا بلاک) میں کچھ نیویگیشن شامل کریں ۔

خصوصی ٹائٹل ٹریٹمنٹ

اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن کے ساتھ۔

کہیں جاؤ
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
خصوصی ٹائٹل ٹریٹمنٹ

اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن کے ساتھ۔

کہیں جاؤ
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

امیجز

کارڈز میں تصاویر کے ساتھ کام کرنے کے لیے چند اختیارات شامل ہیں۔ کارڈ کے دونوں سرے پر "امیج کیپس" کو شامل کرنے، کارڈ کے مواد کے ساتھ تصویروں کو اوورلی کرنے، یا صرف تصویر کو کارڈ میں سرایت کرنے سے انتخاب کریں۔

تصویری ٹوپی

ہیڈر اور فوٹرز کی طرح، کارڈز میں اوپر اور نیچے "امیج کیپس" شامل ہو سکتے ہیں—ایک کارڈ کے اوپر یا نیچے کی تصاویر۔

100%x180
کارڈ کا عنوان

یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

کارڈ کا عنوان

یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

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
کارڈ کا عنوان

یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

<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
کارڈ کا عنوان

یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

100%x180
کارڈ کا عنوان

اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

100%x180
کارڈ کا عنوان

یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

<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
کارڈ کا عنوان

یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

100%x200
کارڈ کا عنوان

اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

100%x200
کارڈ کا عنوان

یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

<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. انٹیجر posuere erat a ante.

ماخذ کے عنوان میں مشہور کوئی
100%x160
کارڈ کا عنوان

اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر pouere erat.

ماخذ کے عنوان میں مشہور کوئی
کارڈ کا عنوان

اس کارڈ کے نیچے ایک باقاعدہ عنوان اور متن کا مختصر پیراگراف ہے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.

ماخذ کے عنوان میں مشہور کوئی
کارڈ کا عنوان

یہ ذیل میں عنوان اور معاون متن کے ساتھ ایک اور کارڈ ہے۔ اس کارڈ میں کچھ اضافی مواد ہے تاکہ اسے مجموعی طور پر قدرے اونچا بنایا جا سکے۔

آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔

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