Группа списков

Группы списков - это гибкий и мощный компонент для отображения контента. Измените и расширьте их так, чтобы поддерживать практически любой контент внутри.

Bootstrap documentation

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Morbi leo risus 1

Группа списков без обводки

Ahead only

Используйте класс .list-group-flush для вывода списка без обводки и горизонтальных отступов.

Unlimited users. One price.

We don't charge per seat, just per service.

Guaranteed 100% uptime

Our server network never goes down.

Lifetime storage *

We store all your data forever. No extra charge.

256-bit encryption

Keep your communication and data safe.


          <div class="list-group list-group-flush">
  <div class="list-group-item d-flex align-items-center">
    
    <!-- Text -->
    <div class="mr-auto">
      
      <!-- Heading -->
      <p class="font-weight-bold mb-1">
        Unlimited users. One price.
      </p>

      <!-- Text -->
      <p class="font-size-sm text-muted mb-0">
        We don't charge per seat, just per service.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft ml-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
  <div class="list-group-item d-flex align-items-center">
      
    <!-- Text -->                
    <div class="mr-auto">
      
      <!-- Heading -->
      <p class="font-weight-bold mb-1">
        Guaranteed 100% uptime
      </p>

      <!-- Text -->
      <p class="font-size-sm text-muted mb-0">
        Our server network never goes down.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft ml-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
  <div class="list-group-item d-flex align-items-center">
      
    <!-- Text -->
    <div class="mr-auto">
      
      <!-- Heading -->
      <p class="font-weight-bold mb-1">
        Lifetime storage *
      </p>

      <!-- Text -->
      <p class="font-size-sm text-muted mb-0">
        We store all your data forever. No extra charge.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft ml-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
  <div class="list-group-item d-flex align-items-center">
      
    <!-- Text -->
    <div class="mr-auto">
      
      <!-- Heading -->
      <p class="font-weight-bold mb-1">
        256-bit encryption
      </p>

      <!-- Text -->
      <p class="font-size-sm text-muted mb-0">
        Keep your communication and data safe.
      </p>

    </div>
      
    <!-- Check -->
    <div class="badge badge-rounded-circle badge-success-soft ml-4">
      <i class="fe fe-check"></i>
    </div>

  </div>
</div>

Простой список

Ahead only

Используйте для создания простого списка ссылок

Background
Borders
Images
Lift


          <ul class="list mb-0">
  <li class="list-item">
    <a class="list-link" href="background.scss">Background</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="borders.scss">Borders</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="images.scss">Images</a>
  </li>
  <li class="list-item">
    <a class="list-link" href="lift.scss">Lift</a>
  </li>
</ul>

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

Компоненты

Иконки

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

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

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

JS Плагины

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

Остальное

Группа списков

Группа списков без обводки

Простой список

Перейти