کارڈز
بوٹسٹریپ کے کارڈز ایک لچکدار اور قابل توسیع مواد کا کنٹینر فراہم کرتے ہیں جس میں متعدد اقسام اور اختیارات ہوتے ہیں۔
کارڈ ایک لچکدار اور قابل توسیع مواد کا کنٹینر ہے۔ اس میں ہیڈر اور فوٹر کے اختیارات، مواد کی وسیع اقسام، پس منظر کے متعلقہ رنگ، اور طاقتور ڈسپلے کے اختیارات شامل ہیں۔ اگر آپ بوٹسٹریپ 3 سے واقف ہیں، تو کارڈ ہمارے پرانے پینلز، کنویں اور تھمب نیلز کی جگہ لے لیتے ہیں۔ ان اجزاء سے ملتی جلتی فعالیت کارڈز کے لیے موڈیفائر کلاسز کے طور پر دستیاب ہے۔
کارڈ ممکن حد تک کم مارک اپ اور اسٹائلز کے ساتھ بنائے جاتے ہیں، لیکن پھر بھی ایک ٹن کنٹرول اور حسب ضرورت فراہم کرنے کا انتظام کرتے ہیں۔ فلیکس باکس کے ساتھ بنایا گیا، وہ آسان سیدھ میں پیش کرتے ہیں اور بوٹسٹریپ کے دیگر اجزاء کے ساتھ اچھی طرح مکس ہوتے ہیں۔ ان کے پاس بطور margin
ڈیفالٹ کوئی نہیں ہے، لہذا ضرورت کے مطابق وقفہ کاری کی افادیت کا استعمال کریں ۔
ذیل میں مخلوط مواد اور ایک مقررہ چوڑائی والے بنیادی کارڈ کی ایک مثال ہے۔ کارڈز کی شروع کرنے کے لیے کوئی مقررہ چوڑائی نہیں ہے، اس لیے وہ قدرتی طور پر اس کے بنیادی عنصر کی پوری چوڑائی کو پُر کریں گے۔ یہ ہمارے مختلف سائز کے اختیارات کے ساتھ آسانی سے اپنی مرضی کے مطابق کیا جاتا ہے ۔
کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
کہیں جاؤ<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
کارڈ مختلف قسم کے مواد کو سپورٹ کرتے ہیں، بشمول تصاویر، متن، فہرست گروپس، لنکس اور مزید۔ ذیل میں اس کی مثالیں دی گئی ہیں جن کی تائید کی جاتی ہے۔
کارڈ کا بلڈنگ بلاک ہے .card-body
۔ جب بھی آپ کو کارڈ کے اندر پیڈڈ سیکشن کی ضرورت ہو اسے استعمال کریں۔
<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 ٹیگز کے ساتھ بھی اسٹائل کیا جا سکتا ہے۔
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
فلش لسٹ گروپ کے ساتھ کارڈ میں مواد کی فہرستیں بنائیں۔
- Cras justo odio
- Dapibus ac facilisis in
- ویسٹیبولم اور ایروز
<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>
آپ کو مطلوبہ کارڈ بنانے کے لیے متعدد مواد کی اقسام کو مکس اور میچ کریں، یا ہر چیز کو وہاں پھینک دیں۔ ذیل میں تصویر کی طرزیں، بلاکس، ٹیکسٹ اسٹائلز، اور ایک فہرست گروپ دکھایا گیا ہے—سب ایک مقررہ چوڑائی والے کارڈ میں لپٹے ہوئے ہیں۔
کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
- Cras justo odio
- Dapibus ac facilisis in
- ویسٹیبولم اور ایروز
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
کارڈ کے اندر اختیاری ہیڈر اور/یا فوٹر شامل کریں۔
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
کارڈ ہیڈر .card-header
کو <h*>
عناصر میں شامل کرکے اسٹائل کیا جاسکتا ہے۔
نمایاں
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر 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>
کارڈز میں تصاویر کے ساتھ کام کرنے کے لیے چند اختیارات شامل ہیں۔ کارڈ کے دونوں سرے پر "امیج کیپس" کو شامل کرنے، کارڈ کے مواد کے ساتھ تصویروں کو اوورلی کرنے، یا صرف تصویر کو کارڈ میں سرایت کرنے سے انتخاب کریں۔
ہیڈر اور فوٹرز کی طرح، کارڈز میں اوپر اور نیچے "امیج کیپس" شامل ہو سکتے ہیں—ایک کارڈ کے اوپر یا نیچے کی تصاویر۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
ایک تصویر کو کارڈ کے پس منظر میں تبدیل کریں اور اپنے کارڈ کے متن کو اوورلے کریں۔ تصویر پر منحصر ہے، آپ کو اضافی شیلیوں یا افادیت کی ضرورت ہو سکتی ہے یا نہیں۔
<div class="card bg-dark text-white">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
کارڈز میں ان کے پس منظر، بارڈرز اور رنگ کو حسب ضرورت بنانے کے لیے مختلف اختیارات شامل ہیں۔
کارڈ کی ظاہری شکل کو تبدیل کرنے کے لیے متن اور پس منظر کی افادیت کا استعمال کریں۔
بنیادی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
ثانوی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
کامیابی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
خطرہ کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
انتباہی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
معلوماتی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
ہلکے کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
گہرا کارڈ ٹائٹل
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
معاون ٹکنالوجی کے معنی پہنچانا
معنی کو شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (مثلاً مرئی متن)، یا متبادل ذرائع سے شامل کی گئی ہے، جیسے کہ .sr-only
کلاس کے ساتھ چھپا ہوا اضافی متن۔
صرف کارڈ کو تبدیل کرنے کے لیے بارڈر یوٹیلیٹیز استعمال کریں border-color
۔ نوٹ کریں کہ آپ .text-{color}
والدین پر کلاسز لگا سکتے ہیں .card
یا کارڈ کے مندرجات کا ذیلی سیٹ جیسا کہ ذیل میں دکھایا گیا ہے۔
بنیادی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
ثانوی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
کامیابی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
خطرہ کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
انتباہی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
معلوماتی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
ہلکے کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
گہرا کارڈ ٹائٹل
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
آپ ضرورت کے مطابق کارڈ کے ہیڈر اور فوٹر پر بارڈرز کو بھی تبدیل کر سکتے ہیں، اور یہاں تک کہ ان 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;
اپنے یکساں سائز کو حاصل کرنے کے لیے استعمال کرتے ہیں۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
فوٹرز کے ساتھ کارڈ گروپس کا استعمال کرتے وقت، ان کا مواد خود بخود لائن اپ ہو جائے گا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
مساوی چوڑائی اور اونچائی والے کارڈز کے سیٹ کی ضرورت ہے جو ایک دوسرے سے منسلک نہیں ہیں؟ کارڈ ڈیک استعمال کریں۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
بالکل اسی طرح جیسے کارڈ گروپس کے ساتھ، ڈیک میں کارڈ فوٹر خود بخود قطار میں لگ جائیں گے۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
کارڈز کو صرف CSS کے ساتھ میسنری جیسے کالموں میں لپیٹ کر ترتیب دیا جا سکتا ہے .card-columns
۔ کارڈز column
آسانی سے سیدھ میں لانے کے لیے فلیکس باکس کے بجائے CSS خصوصیات کے ساتھ بنائے جاتے ہیں۔ کارڈ اوپر سے نیچے اور بائیں سے دائیں ترتیب دیئے جاتے ہیں۔
سنو! کارڈ کالم کے ساتھ آپ کا مائلیج مختلف ہو سکتا ہے۔ کارڈز کو کالموں میں ٹوٹنے سے روکنے کے لیے، ہمیں انہیں اس طرح پر سیٹ کرنا چاہیے display: inline-block
جیسا column-break-inside: avoid
کہ ابھی تک بلٹ پروف حل نہیں ہے۔
کارڈ کا عنوان جو ایک نئی لائن میں لپیٹتا ہے۔
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر pouere erat.
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
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="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
کارڈ کے کالموں کو کچھ اضافی کوڈ کے ساتھ بڑھایا اور اپنی مرضی کے مطابق بھی بنایا جا سکتا ہے۔ ذیل میں دکھایا گیا ہے .card-columns
کلاس کی ایک توسیع اسی CSS کا استعمال کرتے ہوئے جسے ہم استعمال کرتے ہیں—CSS کالمز— کالموں کی تعداد کو تبدیل کرنے کے لیے ریسپانسیو ٹائرز کا سیٹ تیار کرنے کے لیے۔