آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

درباره ی

کارت یک ظرف محتوا قابل انعطاف است. این شامل گزینه هایی برای هدر ها و پاورقی ها، طیف گسترده ای از محتوا، رنگ های پس زمینه متنی و گزینه های صفحه نمایش قدرتمند است. اگر با بوت استرپ 3 آشنا هستید، کارتها پنل های قدیمی، ریز عکسها را جایگزین می کنند. عملکرد مشابه به آن اجزای به عنوان کلاس های اصلاح کننده برای کارت ها در دسترس است.

 

مثال 

کارت ها با امکان نشانه گذاری و سبک های کوچک ساخته شده اند اما هنوز هم امکان کنترل و سفارشی سازی را فراهم می کنند. ساخته شده با flexbox، آنها هماهنگی آسان و راحت را با سایر اجزای بوت استرپ ترکیب می کنند. آنها به طور پیش فرض حاشیه ای ندارند، از این رو با استفاده از ابزارهای فاصله در صورت لزوم استفاده کنید.

در زیر یک نمونه از یک کارت اساسی با محتوی مخلوط و یک عرض ثابت است. کارت ها دارای عرض ثابت برای شروع نیست، به طوری که به طور طبیعی تمام عرض عنصر والد خود را پر می کنند. این به راحتی با گزینه های اندازه گیری مختلف ما سفارشی می شود.

 

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

 

انواع محتوا

کارت ها از طیف گسترده ای از محتوا، از جمله تصاویر، متن، لیست گروه ها، لینک ها و موارد دیگر پشتیبانی می کنند. در زیر نمونه هایی از آنچه پشتیبانی می شود را می بینید.

 

بدنه

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

 

لیست گروه ها

لیستی از محتویات را در یک کارت با یک گروه لیست فلاش ایجاد کنید.

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

 

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

 

 

Kitchen sink

برای ایجاد کارت مورد نیاز خود، انواع مختلف محتوای را مخلوط و مطابقت دهید یا همه چیز را در آنجا بکشید. در زیر نشان داده شده است سبک های تصویر، بلوک ها، سبک های متن و یک گروه لیست همه پیچیده شده در یک کارت با عرض ثابت است.

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

 

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

 

اندازه گیری

کارت ها هیچ پیمای خاصی برای شروع ندارند، به طوری که آنها 100٪ گسترده خواهد بود مگر اینکه خلاف این  گفته شود. شما می توانید این را با نیازهای CSS سفارشی، کلاس های شبکه، مخازن شبکه Sass یا Utilities تغییر دهید.

 

استفاده از نشانه گذاری شبکه 

با استفاده از شبکه، کارت ها را در ستون ها و ردیف های مورد نیاز قرار دهید.

 <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 سفارشی شده 

 از CSS سفارشی را در شیوه های خود و یا به عنوان سبک های inline برای تنظیم عرض استفاده می شود.

 

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

 

ناوبری

اضافه کردن برخی از ناوبری به هدر کارت (یا بلوک) با اجزای نوت بوت استرپ.

 

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

 

تصاویر

کارت ها شامل چند گزینه برای کار با تصاویر هستند. از میان «کلاه های تصویر» در هر دو طرف یک کارت، تصاویر را با محتوای کارت و یا به سادگی تعبیه تصویر در کارت، انتخاب کنید.

 

کلاه های تصویری 

کارت های مشابه هدر ها و پاورقی ها می توانند شامل تصویر بالا و پایین "image caps" در بالا یا پایین یک کارت باشد.

 

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

 

مرز 

استفاده از سرویس های مرزی برای تغییر تنها border-color یک کارت. توجه داشته باشید که شما می توانید کلاس های {text-{color. را روی parent 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>

 

Mixins utilities

شما همچنین می توانید مرزهای هدر کارت و پاورقی را در صورت نیاز تغییر دهید و حتی  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برای رسیدن به اندازه یکنواختی خود استفاده کنید.

 

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

 

عرشه کارت 

نیاز به مجموعه ای از کارت های عرض و ارتفاع برابر که به یکدیگر متصل نیستند؟ استفاده کنید از عرشه کارت

 

 <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.، سازماندهی کرد. کارت ها با خواص ستون CSS به جای flexbox برای هم ترازی راحت تر ساخته می شوند. کارت ها از بالا به پایین و سمت چپ به راست مرتب شده اند.

 مسافت پیموده شده شما با ستون های کارت ممکن است متفاوت باشد. برای جلوگیری از شکستن کارت ها در ستون ها، ما باید آنها را display: inline-block به عنوان column-break-inside: avoid هنوز راه حل مناسب نیست.

 

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

 

ستون های کارت همچنین می توانند تمدید و سفارشی با برخی از کد اضاف شوند. در زیر نشان داده شده است یک فرمت کلاس کلاس ستون با استفاده از CSS همان CSS ستون ما - برای ایجاد مجموعه ای از سطوح پاسخ برای تغییر تعداد ستون ها.

 

 
 .card-columns { @include media-breakpoint-only(lg) { column-count: 4; } @include media-breakpoint-only(xl) { column-count: 5; } }