کارڈز
بوٹسٹریپ کے کارڈز ایک لچکدار اور قابل توسیع مواد کا کنٹینر فراہم کرتے ہیں جس میں متعدد اقسام اور اختیارات ہوتے ہیں۔
کے بارے میں
کارڈ ایک لچکدار اور قابل توسیع مواد کا کنٹینر ہے۔ اس میں ہیڈر اور فوٹر کے اختیارات، مواد کی وسیع اقسام، پس منظر کے متعلقہ رنگ، اور طاقتور ڈسپلے کے اختیارات شامل ہیں۔ اگر آپ بوٹسٹریپ 3 سے واقف ہیں، تو کارڈ ہمارے پرانے پینلز، کنویں اور تھمب نیلز کی جگہ لے لیتے ہیں۔ ان اجزاء سے ملتی جلتی فعالیت کارڈز کے لیے موڈیفائر کلاسز کے طور پر دستیاب ہے۔
مثال
کارڈ ممکن حد تک کم مارک اپ اور اسٹائلز کے ساتھ بنائے جاتے ہیں، لیکن پھر بھی ایک ٹن کنٹرول اور حسب ضرورت فراہم کرنے کا انتظام کرتے ہیں۔ فلیکس باکس کے ساتھ بنایا گیا، وہ آسان سیدھ میں پیش کرتے ہیں اور بوٹسٹریپ کے دیگر اجزاء کے ساتھ اچھی طرح مکس ہوتے ہیں۔ ان کے پاس بطور margin
ڈیفالٹ کوئی نہیں ہے، لہذا ضرورت کے مطابق وقفہ کاری کی افادیت کا استعمال کریں ۔
ذیل میں مخلوط مواد اور ایک مقررہ چوڑائی والے بنیادی کارڈ کی ایک مثال ہے۔ کارڈز کی شروع کرنے کے لیے کوئی مقررہ چوڑائی نہیں ہے، اس لیے وہ قدرتی طور پر اس کے بنیادی عنصر کی پوری چوڑائی کو پُر کریں گے۔ یہ ہمارے مختلف سائز کے اختیارات کے ساتھ آسانی سے اپنی مرضی کے مطابق کیا جاتا ہے ۔
کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
کہیں جاؤ<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
۔ جب بھی آپ کو کارڈ کے اندر پیڈڈ سیکشن کی ضرورت ہو اسے استعمال کریں۔
<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 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>
گروپس کی فہرست بنائیں
فلش لسٹ گروپ کے ساتھ کارڈ میں مواد کی فہرستیں بنائیں۔
- ایک آئٹم
- دوسری چیز
- تیسری چیز
<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>
- ایک آئٹم
- دوسری چیز
- تیسری چیز
<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>
- ایک آئٹم
- دوسری چیز
- تیسری چیز
<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>
باورچی خانے کے سنک
آپ کو مطلوبہ کارڈ بنانے کے لیے متعدد مواد کی اقسام کو مکس اور میچ کریں، یا ہر چیز کو وہاں پھینک دیں۔ ذیل میں تصویر کی طرزیں، بلاکس، ٹیکسٹ اسٹائلز، اور ایک فہرست گروپ دکھایا گیا ہے—سب ایک مقررہ چوڑائی والے کارڈ میں لپٹے ہوئے ہیں۔
کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
- ایک آئٹم
- دوسری چیز
- تیسری چیز
<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>
ہیڈر اور فوٹر
کارڈ کے اندر اختیاری ہیڈر اور/یا فوٹر شامل کریں۔
<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>
ایک معروف اقتباس، بلاک کوٹ عنصر میں شامل ہے۔
<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>
<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">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">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 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>
تصویری اوورلیز
ایک تصویر کو کارڈ کے پس منظر میں تبدیل کریں اور اپنے کارڈ کے متن کو اوورلے کریں۔ تصویر پر منحصر ہے، آپ کو اضافی شیلیوں یا افادیت کی ضرورت ہو سکتی ہے یا نہیں۔
<div class="card bg-dark text-white">
<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">Last updated 3 mins ago</p>
</div>
</div>
افقی
گرڈ اور یوٹیلیٹی کلاسز کے امتزاج کا استعمال کرتے ہوئے، کارڈز کو موبائل دوستانہ اور جوابی انداز میں افقی بنایا جا سکتا ہے۔ نیچے دی گئی مثال میں، ہم بریک پوائنٹ پر کارڈ کو افقی بنانے کے لیے گرڈ گٹر کے ساتھ ہٹاتے ہیں .no-gutters
اور کلاسز کا استعمال کرتے ہیں۔ آپ کے کارڈ کے مواد کے لحاظ سے مزید ایڈجسٹمنٹ کی ضرورت ہو سکتی ہے۔.col-md-*
md
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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>
کارڈ کے انداز
کارڈز میں ان کے پس منظر، بارڈرز اور رنگ کو حسب ضرورت بنانے کے لیے مختلف اختیارات شامل ہیں۔
پس منظر اور رنگ
کارڈ کی ظاہری شکل کو تبدیل کرنے کے لیے متن اور پس منظر کی افادیت کا استعمال کریں۔
بنیادی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
ثانوی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
کامیابی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
خطرہ کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
انتباہی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
معلوماتی کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
ہلکے کارڈ کا عنوان
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
گہرا کارڈ ٹائٹل
کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔
<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;
سے شروع ہونے والے یکساں طول و عرض کے ساتھ منسلک ہونے کے لیے استعمال کرتے ہیں۔sm
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<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>
فوٹرز کے ساتھ کارڈ گروپس کا استعمال کرتے وقت، ان کا مواد خود بخود لائن اپ ہو جائے گا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
<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>
کارڈ ڈیک
مساوی چوڑائی اور اونچائی والے کارڈز کے سیٹ کی ضرورت ہے جو ایک دوسرے سے منسلک نہیں ہیں؟ کارڈ ڈیک استعمال کریں۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<div class="card-deck">
<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>
<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>
بالکل اسی طرح جیسے کارڈ گروپس کے ساتھ، ڈیک میں کارڈ فوٹر خود بخود قطار میں لگ جائیں گے۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
کارڈ کا عنوان
یہ ایک وسیع کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ اس کارڈ میں مساوی اونچائی کی کارروائی کو ظاہر کرنے والے پہلے سے بھی زیادہ لمبا مواد ہے۔
<div class="card-deck">
<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
درمیانی بریک پوائنٹ اپ سے، متعدد قطاروں میں برابر چوڑائی میں چار کارڈز کو تقسیم کرنا ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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
اور آپ کو چوتھا کارڈ لپیٹ نظر آئے گا۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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 میں سیٹ کر سکتے ہیں۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
کارڈ کا عنوان
یہ ایک مختصر کارڈ ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔
کارڈ کا عنوان
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>
کارڈ کالم
کارڈز کو صرف CSS کے ساتھ میسنری جیسے کالموں میں لپیٹ کر ترتیب دیا جا سکتا ہے .card-columns
۔ کارڈز column
آسانی سے سیدھ میں لانے کے لیے فلیکس باکس کے بجائے CSS خصوصیات کے ساتھ بنائے جاتے ہیں۔ کارڈ اوپر سے نیچے اور بائیں سے دائیں ترتیب دیئے جاتے ہیں۔
سنو! کارڈ کالم کے ساتھ آپ کا مائلیج مختلف ہو سکتا ہے۔ کارڈز کو کالموں میں ٹوٹنے سے روکنے کے لیے، ہمیں انہیں اس طرح پر سیٹ کرنا چاہیے display: inline-block
جیسا column-break-inside: avoid
کہ ابھی تک بلٹ پروف حل نہیں ہے۔
کارڈ کا عنوان جو ایک نئی لائن میں لپیٹتا ہے۔
یہ ایک لمبا کارڈ ہے جس میں ذیل میں معاون متن کے ساتھ اضافی مواد میں قدرتی لیڈ ان ہے۔ یہ مواد تھوڑا طویل ہے۔
ایک معروف اقتباس، بلاک کوٹ عنصر میں شامل ہے۔
کارڈ کا عنوان
اس کارڈ میں اضافی مواد میں قدرتی لیڈ کے طور پر ذیل میں معاون متن موجود ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
ایک معروف اقتباس، بلاک کوٹ عنصر میں شامل ہے۔
کارڈ کا عنوان
اس کارڈ کے نیچے ایک باقاعدہ عنوان اور متن کا مختصر پیراگراف ہے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
ایک معروف اقتباس، بلاک کوٹ عنصر میں شامل ہے۔
کارڈ کا عنوان
یہ ذیل میں عنوان اور معاون متن کے ساتھ ایک اور کارڈ ہے۔ اس کارڈ میں کچھ اضافی مواد ہے تاکہ اسے مجموعی طور پر قدرے اونچا بنایا جا سکے۔
آخری بار 3 منٹ پہلے اپ ڈیٹ کیا گیا۔
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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>A well-known quote, contained in a blockquote element.</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 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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<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 src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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;
}
}