card Bootstrap با کلاس .card-custom برای ارائه طیف گسترده ای از گزینه ها برای کارتهای چند منظوره.
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
کارت پایه ای
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
کارت پایه ای
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
کارت پایه ای
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
کارت پایه ای
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
کارت پایه ای
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
کارت پایه ای
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-primary"></i>
</span>
<h3 class="card-label">
کارت فوتر
<small>sub title</small>
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-success font-weight-bold">
<i class="flaticon2-cube"></i> گزارشات
</a>
</div>
</div>
<div class="card-body">
...
</div>
<div class="card-footer d-flex justify-content-between">
<a href="#" class="btn btn-light-primary font-weight-bold">مدیریت</a>
<a href="#" class="btn btn-outline-secondary font-weight-bold">بیشتر بدانید</a>
</div>
</div>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد., لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد., لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد., لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد., لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد., لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد., لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-primary"></i>
</span>
<h3 class="card-label">
اسکرول محتوا
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-light-primary font-weight-bold">
<i class="flaticon2-cube"></i> تنظیمات
</a>
</div>
</div>
<div class="card-body">
<div data-scroll="true" data-height="200">
....
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<a href="#" class="btn btn-light-primary font-weight-bold">مدیریت</a>
<a href="#" class="btn btn-outline-secondary font-weight-bold">بیشتر بدانید</a>
</div>
</div>
<div class="card card-custom bg-primary">
<div class="card-header border-0">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-white"></i>
</span>
<h3 class="card-label text-white">
بک گراند با حالت اولیه
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-white">
<i class="flaticon2-cube"></i> تنظیمات
</a>
</div>
</div>
<div class="separator separator-solid separator-white opacity-20"></div>
<div class="card-body text-white">
...
</div>
</div>
<div class="card card-custom bg-success">
<div class="card-header border-0">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-white"></i>
</span>
<h3 class="card-label text-white">
بک گراند حالت موفقیت
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-white font-weight-bold">
<i class="flaticon2-cube"></i> تنظیمات
</a>
</div>
</div>
<div class="separator separator-solid separator-white opacity-20"></div>
<div class="card-body text-white">
...
</div>
</div>
