Grupa list

Ta instrukcja również dotyczy szablonów graficznych Flow, Vogue i Pipeline!

Grupy list to elastyczny i potężny komponent do wyświetlania treści. Zmodyfikuj je i rozszerz, aby obsługiwały prawie każdą zawartość w środku.

Dokumentacja Bootstrap

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

Grupa list bez obrysu

Ahead only

Użyj klasy .list-group-flush aby wyświetlić listę bez obrysu lub poziomego wcięcia.

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>

Prosta lista

Ahead only

Służy do tworzenia prostej listy linków

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>

Grupa list - instrukcja do szablonu "Ahead"

Grupa list bez obrysu

Prosta lista