مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

کارڈز

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

اس صفحہ پر

کے بارے میں

کارڈ ایک لچکدار اور قابل توسیع مواد کا کنٹینر ہے۔ اس میں ہیڈر اور فوٹر کے اختیارات، مواد کی وسیع اقسام، پس منظر کے متعلقہ رنگ، اور طاقتور ڈسپلے کے اختیارات شامل ہیں۔ اگر آپ بوٹسٹریپ 3 سے واقف ہیں، تو کارڈ ہمارے پرانے پینلز، کنویں اور تھمب نیلز کی جگہ لے لیتے ہیں۔ ان اجزاء سے ملتی جلتی فعالیت کارڈز کے لیے موڈیفائر کلاسز کے طور پر دستیاب ہے۔

مثال

کارڈ ممکن حد تک کم مارک اپ اور اسٹائلز کے ساتھ بنائے جاتے ہیں، لیکن پھر بھی ایک ٹن کنٹرول اور حسب ضرورت فراہم کرنے کا انتظام کرتے ہیں۔ فلیکس باکس کے ساتھ بنایا گیا، وہ آسان سیدھ میں پیش کرتے ہیں اور بوٹسٹریپ کے دیگر اجزاء کے ساتھ اچھی طرح مکس ہوتے ہیں۔ ان کے پاس بطور marginڈیفالٹ کوئی نہیں ہے، لہذا ضرورت کے مطابق وقفہ کاری کی افادیت کا استعمال کریں ۔

ذیل میں مخلوط مواد اور ایک مقررہ چوڑائی والے بنیادی کارڈ کی ایک مثال ہے۔ کارڈز کی شروع کرنے کے لیے کوئی مقررہ چوڑائی نہیں ہے، اس لیے وہ قدرتی طور پر اس کے بنیادی عنصر کی پوری چوڑائی کو پُر کریں گے۔ یہ ہمارے مختلف سائز کے اختیارات کے ساتھ آسانی سے اپنی مرضی کے مطابق کیا جاتا ہے ۔

Placeholder Image cap
کارڈ کا عنوان

کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔

کہیں جاؤ
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

مواد کی اقسام

کارڈ مختلف قسم کے مواد کو سپورٹ کرتے ہیں، بشمول تصاویر، متن، فہرست گروپس، لنکس اور مزید۔ ذیل میں اس کی مثالیں دی گئی ہیں جن کی تائید کی جاتی ہے۔

جسم

کارڈ کا بلڈنگ بلاک ہے .card-body۔ جب بھی آپ کو کارڈ کے اندر پیڈڈ سیکشن کی ضرورت ہو اسے استعمال کریں۔

یہ کارڈ باڈی میں کچھ متن ہے۔
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

عنوانات، متن، اور لنکس

کارڈ کے عنوان کو ٹیگ میں شامل کرکے استعمال کیا جاتا .card-titleہے <h*>۔ .card-linkاسی طرح، لنکس کو ایک <a>ٹیگ میں شامل کرکے ایک دوسرے کے ساتھ جوڑا اور رکھا جاتا ہے۔

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

امیجز

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

تصویری ٹوپی

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

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>

مکسنس کی افادیت

آپ ضرورت کے مطابق کارڈ کے ہیڈر اور فوٹر پر بارڈرز کو بھی تبدیل کر سکتے ہیں، اور یہاں تک کہ ان 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%Sass میں سیٹ کر سکتے ہیں۔

Placeholder Image cap
کارڈ کا عنوان

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

Placeholder Image cap
کارڈ کا عنوان

یہ ایک مختصر کارڈ ہے۔

Placeholder Image cap
کارڈ کا عنوان

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

Placeholder Image cap
کارڈ کا عنوان

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

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

کارڈ گروپس کی طرح، کارڈ کے فوٹر خود بخود قطار میں لگ جائیں گے۔

Placeholder Image cap
کارڈ کا عنوان

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

آخری بار 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 تکنیک کا استعمال کیا ، لیکن یہ تکنیک بہت سے ناخوشگوار ضمنی اثرات کے ساتھ آئی ۔ اگر آپ اس قسم کی ترتیب میں رکھنا چاہتے ہیں ، تو آپ صرف میسنری پلگ ان کا استعمال کر سکتے ہیں۔ معمار Bootstrap میں شامل نہیں ہے ، لیکن ہم نے آپ کو شروع کرنے میں مدد کے لیے ایک ڈیمو مثال بنایا ہے۔v5

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے 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};

Sass متغیرات

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