Компоненты

Типографика заголовков

Ex. <h1> H1. Bootstrap heading </h1>

H1. Bootstrap heading

H2. Bootstrap heading

H3. Bootstrap heading

H4. Bootstrap heading

H5. Bootstrap heading
H6. Bootstrap heading

Отображение заголовков

Ex. <p class="display-1"> Display 1 </p>

Display 1

Display 2

Display 3

Display 4

Цвета фона

Ex. <div class="bg-primary"> KVSE.marketing - Creative Agency </div>

Спокойные оттенки

Ex. <div class="bg-soft-primary"> KVSE.marketing - Creative Agency </div>

Цвет текста

Ex. <div class="text-primary"> KVSE.marketing - Creative Agency </div>
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark

Кнопки

Ex. <a href="#" class="btn btn-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Закругленные

Ex. <a href="#" class="btn btn-pills btn-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Скругленные углы

Ex. <a href="#" class="btn btn-soft-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Закругленные спокойных оттенков

Ex. <a href="#" class="btn btn-pills btn-soft-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Контурные

Ex. <a href="#" class="btn btn-outline-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Контурные закругленные

Ex. <a href="#" class="btn btn-outline-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Кнопки иконки

Ex. <a href="#" class="btn btn-icon btn-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

Контурные кнопки иконки

Ex. <a href="#" class="btn btn-icon btn-outline-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

Круглые кнопки иконки

Ex. <a href="#" class="btn btn-icon btn-pills btn-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

Контурные круглые кнопки иконки

Ex. <a href="#" class="btn btn-icon btn-pills btn-outline-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

Кнопки разных размеров

Ex. <a href="#" class="btn btn-primary btn-sm"> Primary </a>
Small Small Small Small
Ex. <a href="#" class="btn btn-primary btn-lg"> Primary </a>
Large Large Large Large

Метки

Ex. <span class="badge badge-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark

Закругленные метки

Ex. <span class="badge badge-pill badge-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark

Контурные метки

Ex. <span class="badge badge-pill badge-outline-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark

Ссылки метки

Ex. <a href="#" class="badge badge-primary"> primary </a>
Primary Secondary Success Danger Warning Info Light Dark

Оповещения

Ex. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>

Оповещения со ссылкой

Ex. <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>

Дополнительный контент

Предупреждения

Ex.
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true"> × </span>
  </button>
</div>

Продвинутые оповещения

Ex.
<div class="alert alert-primary alert-pills" role="alert">
   <span class="badge badge-pill badge-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>

Контурные продвинутые оповещения

Ex.
<div class="alert alert-outline-primary alert-pills" role="alert">
   <span class="badge badge-pill badge-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>

Аккордеоны

Accordion #1

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

Карточки

Вертикальные карточки
<div class="card shadow rounded border-0 overflow-hidden>
   <img src="images/blog/01.jpg" class="img-fluid" alt=">
   <div class="card-body">
     <h5 class="card-title">KVSE.marketing - Creative Agency</h5>
     <p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
   </div>
</div>
KVSE.marketing - Creative Agency

Due to its widespread use as filler text for layouts, non-readability is of great importance

Read More
KVSE.marketing - Creative Agency

Due to its widespread use as filler text for layouts, non-readability is of great importance

Read More
Горизонтальные карточки
<div class="card shadow rounded border-0 overflow-hidden>
   <img src="images/blog/01.jpg" class="img-fluid" alt=">
   <div class="card-body">
     <h5 class="card-title">KVSE.marketing - Creative Agency</h5>
     <p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
   </div>
</div>
...
KVSE.marketing - Creative Agency

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Формы

Флажки

Радио-кнопки

Кнопки-переключатели

Формы подписки

Яндекс карты

Аватары

Ex. <img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded">

Круглые аватары

Ex. <img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded-circle">

Прогресс бары

Ex.
<div class="progress-box">
   <h6 class="title text-muted"> Progress</h6>
   <div class="progress">
     <div class="progress-bar position-relative bg-primary" style="width:84%;">
       <div class="progress-value d-block text-muted h6">84%</div>
     </div>
   </div>
</div>
WordPress
84%
PHP / MYSQL
75%
Angular / JavaScript
79%
HTML
95%

Всплывающие подсказки

Ex. <a href="#"class="btn btn-primary mr-2 mb-2" data-toggle="tooltip" data-placement="top" title="Top Tooltip" alt=""> Top Tooltip </a>
Top Left Bottom Right

Модальные окна

Таблицы

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Harry Potter @hpt

Цитаты

" There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. "

Иконки

Feather Icons

Более 280 иконок Вы можете получить здесь: https://feathericons.com/

Ex. <i data-feather="mail" class="fea icon-sm"> </i>
Material Design Icons

Более чем 4400 иконок для Вашего дизайна, Вы можете получить здесь: https://materialdesignicons.com/

Ex. <i class="mdi mdi-home"> </i>
Flaticon Icons

Всю информацию о значках Flaticon можно получить здесь: https://www.flaticon.com/packs/basic-icon