عنوان کارت
متنی سریع برای ساختن روی عنوان کارت و تشکیل بخش عمده محتوای کارت. با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی.
دکمه
متنی سریع برای ساختن روی عنوان کارت و تشکیل بخش عمده محتوای کارت. با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی.
دکمه
<div class="card mb-3 mb-xl-0">
<img class="card-img-top img-fluid" src="/images/small/img-1.jpg" alt="img-1">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text text-muted">
متنی سریع برای ساختن روی عنوان کارت و تشکیل
بخش عمده محتوای کارت. با متن حمایتی در زیر به
عنوان یک ورودی طبیعی به محتوای اضافی.
</p>
<a href="javascript:void(0);" class="btn btn-primary">دکمه</a>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
<div class="card mb-3">
<img class="card-img-top img-fluid" src="/images/small/img-2.jpg" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text text-muted">متنی سریع برای ساختن روی عنوان کارت.</p>
</div> <!-- پایان بدنه کارت -->
<ul class="list-group list-group-flush text-muted">
<li class="list-group-item text-muted">Dapibus ac facilisis in</li>
</ul>
<div class="card-body">
<a href="javascript:void(0);" class="card-link text-primary">لینک کارت</a>
<a href="javascript:void(0);" class="card-link text-primary">لینک دیگر</a>
</div>
</div> <!-- پایان کارت -->
<div class="card mb-3 mb-xl-0">
<img class="card-img-top img-fluid" src="/images/small/img-4.jpg" alt="img-4">
<div class="card-body">
<p class="card-text text-muted">
متنی سریع برای ساختن روی عنوان کارت و تشکیل
بخش عمده محتوای کارت. با متن حمایتی در زیر به
عنوان یک ورودی طبیعی به محتوای اضافی.
</p>
<a href="javascript:void(0);" class="btn btn-primary">دکمه</a>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
<div class="card mb-3 mb-xl-0">
<div class="card-body">
<h5 class="card-title mb-0">عنوان کارت</h5>
</div>
<img class="img-fluid" src="/images/small/img-5.jpg" alt="img-5">
<div class="card-body">
<p class="card-text text-muted">متنی سریع برای ساختن روی عنوان کارت.</p>
<a href="javascript:void(0);" class="card-link text-primary">لینک کارت</a>
<a href="javascript:void(0);" class="card-link text-primary">لینک دیگر</a>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
<div class="card card-body">
<h5 class="card-title mb-1">درمان عنوان ویژه</h5>
<p class="card-text">لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت.</p>
<a href="javascript: void(0);" class="btn btn-primary">به جایی بروید</a>
</div> <!-- پایان کارت-->
<div class="card card-body">
<h5 class="card-title mb-1">درمان عنوان ویژه</h5>
<p class="card-text">لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت.</p>
<a href="javascript: void(0);" class="btn btn-primary">به جایی بروید</a>
</div> <!-- پایان کارت-->
لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.
<div class="card">
<div class="card-header">ویژه</div>
<div class="card-body">
<h5 class="card-title mb-1">درمان عنوان ویژه</h5>
<p class="card-text">لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت.</p>
<a href="javascript: void(0);" class="btn btn-primary">به جایی بروید</a>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card">
<div class="card-header">نقل قول</div>
<div class="card-body">
<blockquote>
<p>لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.</p>
<footer>شخصی مشهور در <cite>عنوان منبع</cite></footer>
</blockquote>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card">
<div class="card-header">ویژه</div>
<div class="card-body">
<a href="javascript: void(0);" class="btn btn-primary">به جایی بروید</a>
</div>
<div class="card-footer text-muted">2 روز پیش</div>
</div> <!-- پایان کارت-->
کارت رنگی
لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.
لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.
لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.
لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.
لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.
<div class="card text-bg-primary">
<div class="card-body">
<h5 class="card-title text-white mb-2">درمان عنوان ویژه</h5>
<p class="card-text">لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت.</p>
<a href="javascript: void(0);" class="btn btn-light btn-sm">دکمه</a>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card bg-secondary text-white">
<div class="card-body">
<blockquote>
<p>لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.</p>
<footer>شخصی مشهور در <cite title="عنوان منبع">عنوان منبع</cite></footer>
</blockquote>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card text-bg-success">
<div class="card-body">
<blockquote>
<p>لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.</p>
<footer>شخصی مشهور در <cite title="عنوان منبع">عنوان منبع</cite></footer>
</blockquote>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card text-bg-info">
<div class="card-body">
<blockquote>
<p>لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.</p>
<footer>شخصی مشهور در <cite title="عنوان منبع">عنوان منبع</cite></footer>
</blockquote>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card text-bg-warning">
<div class="card-body">
<blockquote>
<p>لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.</p>
<footer>شخصی مشهور در <cite title="عنوان منبع">عنوان منبع</cite></footer>
</blockquote>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card text-bg-danger">
<div class="card-body">
<blockquote>
<p>لورم ایپسوم دلار سیت آمت، کانسکتتور آدیپیسینگ الیت. عددر پوزیتور ایرات آ آنت.</p>
<footer>شخصی مشهور در <cite title="عنوان منبع">عنوان منبع</cite></footer>
</blockquote>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
کارت حاشیه دار
<div class="card border-primary border">
<div class="card-body">
<h5 class="card-title text-primary mb-2">درمان عنوان ویژه</h5>
<p class="card-text">با متن حمایتی در زیر به عنوان یک ورودی طبیعی به
محتوای اضافی.</p>
<a href="javascript: void(0);" class="btn btn-primary btn-sm">دکمه</a>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card border-secondary border">
<div class="card-body">
<h5 class="card-title mb-2">درمان عنوان ویژه</h5>
<p class="card-text">با متن حمایتی در زیر به عنوان یک ورودی طبیعی به
محتوای اضافی.</p>
<a href="javascript: void(0);" class="btn btn-secondary btn-sm">دکمه</a>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
<div class="card border-success border">
<div class="card-body">
<h5 class="card-title mb-2 text-success">درمان عنوان ویژه</h5>
<p class="card-text">با متن حمایتی در زیر به عنوان یک ورودی طبیعی به
محتوای اضافی.</p>
<a href="javascript: void(0);" class="btn btn-success btn-sm">دکمه</a>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان کارت-->
کارت افقی
عنوان کارت
این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
عنوان کارت
این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="/images/small/img-1.jpg" class="img-fluid rounded-start h-100" alt="img-1">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.</p>
<p class="card-text"><small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small></p>
</div> <!-- پایان بدنه کارت-->
</div> <!-- پایان ستون -->
</div> <!-- پایان ردیف-->
</div> <!-- پایان کارت-->
<div class="card">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.</p>
<p class="card-text"><small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small></p>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان ستون -->
<div class="col-md-4">
<img src="/images/small/img-2.jpg" class="img-fluid rounded-end h-100" alt="img-2">
</div> <!-- پایان ستون -->
</div> <!-- پایان ردیف-->
</div> <!-- پایان کارت -->
لینک کشیده شده
کارت با لینک کشیده شده
به جایی بروید
کارت با لینک کشیده شده
متنی سریع برای ساختن روی کارت و تشکیل بخش عمده محتوای کارت.
کارت با لینک کشیده شده
به جایی بروید
کارت با لینک کشیده شده
متنی سریع برای ساختن روی کارت و تشکیل بخش عمده محتوای کارت.
<div class="card">
<img src="/images/small/img-1.jpg" class="card-img-top" alt="img-1">
<div class="card-body">
<h5 class="card-title mb-2">کارت با لینک کشیده شده</h5>
<a href="javascript:void(0);" class="btn btn-primary mt-2 stretched-link">به جایی بروید</a>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
<div class="card">
<img src="/images/small/img-2.jpg" class="card-img-top" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2"><a href="javascript:void(0);" class="text-primary stretched-link">کارت با لینک کشیده شده</a></h5>
<p class="card-text">
متنی سریع برای ساختن روی کارت و تشکیل بخش عمده محتوای کارت.
</p>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
<div class="card">
<img src="/images/small/img-3.jpg" class="card-img-top" alt="img-3">
<div class="card-body">
<h5 class="card-title mb-2">کارت با لینک کشیده شده</h5>
<a href="javascript:void(0);" class="btn btn-primary mt-2 stretched-link">به جایی بروید</a>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
<div class="card">
<img src="/images/small/img-4.jpg" class="card-img-top" alt="img-4">
<div class="card-body">
<h5 class="card-title mb-2"><a href="javascript:void(0);" class="stretched-link">کارت با لینک کشیده شده</a></h5>
<p class="card-text">
متنی سریع برای ساختن روی کارت و تشکیل بخش عمده محتوای کارت.
</p>
</div> <!-- پایان بدنه کارت -->
</div> <!-- پایان کارت -->
گروه کارت
عنوان کارت
این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
عنوان کارت
این کارت دارای متن پشتیبانی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
عنوان کارت
این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این کارت دارای محتوای طولانیتری از دومی است تا نشان دهد که عمل ارتفاع برابر.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
<div class="card-group">
<div class="card d-block">
<img class="card-img-top" src="/images/small/img-1.jpg" alt="img-1">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک
ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.</p>
<p class="card-text">
<small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small>
</p>
</div>
</div>
<div class="card d-block">
<img class="card-img-top" src="/images/small/img-2.jpg" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این کارت دارای متن پشتیبانی در زیر به عنوان یک ورودی
طبیعی به محتوای اضافی است.</p>
<p class="card-text">
<small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small>
</p>
</div>
</div>
<div class="card d-block">
<img class="card-img-top" src="/images/small/img-3.jpg" alt="img-3">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت عریضتر است با متن حمایتی در زیر به عنوان یک
ورودی طبیعی به محتوای اضافی. این کارت دارای محتوای طولانیتری از دومی است
تا نشان دهد که عمل ارتفاع برابر.</p>
<p class="card-text">
<small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small>
</p>
</div>
</div>
</div> <!-- پایان گروه کارت-->
دسته کارت
عنوان کارت
این یک کارت طولانیتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
عنوان کارت
این یک کارت طولانیتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
عنوان کارت
این یک کارت طولانیتر است با متن حمایتی در زیر به عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی طولانیتر است.
آخرین بار 3 دقیقه پیش بهروزرسانی شد
<div class="card">
<img src="/images/small/img-4.jpg" class="card-img-top" alt="img-4">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت طولانیتر است با متن حمایتی در زیر به
عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی
طولانیتر است.</p>
<p class="card-text">
<small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small>
</p>
</div><!-- پایان بدنه کارت -->
</div><!-- پایان کارت -->
<div class="card">
<img src="/images/small/img-3.jpg" class="card-img-top" alt="img-3">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت طولانیتر است با متن حمایتی در زیر به
عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی
طولانیتر است.</p>
<p class="card-text">
<small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small>
</p>
</div><!-- پایان بدنه کارت -->
</div><!-- پایان کارت -->
<div class="card">
<img src="/images/small/img-2.jpg" class="card-img-top" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2">عنوان کارت</h5>
<p class="card-text">این یک کارت طولانیتر است با متن حمایتی در زیر به
عنوان یک ورودی طبیعی به محتوای اضافی. این محتوا کمی
طولانیتر است.</p>
<p class="card-text">
<small class="text-muted">آخرین بار 3 دقیقه پیش بهروزرسانی شد</small>
</p>
</div><!-- پایان بدنه کارت -->
</div><!-- پایان کارت -->