Значки

Небольшой компонент подсчета и маркировки.

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

В цвет темы дизайна

Ahead only

Класс Default позволяет создавать значки с цветом выбранным в настройках темы дизайна.

Default Default pill Default soft


          <span class="badge badge-default">Default</span>
<span class="badge badge-pill badge-default">Default pill</span>

<span class="badge badge-default-soft">Default soft</span>

Полупрозрачные

Ahead only

Класс Soft позволяет создавать значки с полупрозрачным фоновым цветом.

Primary Secondary Success Info Warning Danger Light Dark


          <span class="badge badge-primary-soft">Primary</span>
<span class="badge badge-secondary-soft">Secondary</span>
<span class="badge badge-success-soft">Success</span>
<span class="badge badge-info-soft">Info</span>
<span class="badge badge-warning-soft">Warning</span>
<span class="badge badge-danger-soft">Danger</span>
<span class="badge badge-light-soft">Light</span>
<span class="badge badge-dark-soft">Dark</span>

Размеры

Ahead only

Для создания значком большого размера используте класс .badge-lg. Кроме того можно увеличивать размеры текста внутри значка.

Large Standard


          <span class="badge badge-lg badge-primary">
  <span class="h6 text-uppercase font-weight-bold">Large</span>
</span>

Круглые значки

Ahead only

Для создания круглых значков испльзуйте класс .badge-rounded-cirle.

          
  <span class="badge badge-lg badge-rounded-circle badge-primary">
    <i class="icon icon-xxxxs">
      {call include_icon icon="feather/check"}
    </i>
  </span>
  <span class="badge badge-rounded-circle badge-secondary-soft">
    <i class="icon icon-xxxxs">
      {call include_icon icon="feather/check"}
    </i>
  </span>

Позиционирование

Ahead only

Значок можно расположить внутри или вне элемента при помощи классов.badge-float-inside and .badge-float-outside.

Inside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?

Outside


          <!-- Card -->
<div class="card">
  <div class="card-body">

    <!-- Badge -->
    <span class="badge badge-primary badge-pill badge-float badge-float-inside">
      Inside
    </span>
    
    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?
    </p>

  </div>
</div>

<!-- Card -->
<div class="card">
  <div class="card-body">

    <!-- Badge -->
    <span class="badge badge-primary badge-pill badge-float badge-float-outside">
      Outside
    </span>
    
    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?
    </p>

  </div>
</div>

Начало работы

Компоненты

Иконки

Готовые блоки

Готовые страницы

Плагины и приложения

JS Плагины

Дополнительные и глобальные параметры

Остальное

Значки

В цвет темы дизайна

Полупрозрачные

Размеры

Круглые значки

Позиционирование

Перейти