Bootstrap pinterest linkedin behance copy

Exemples de barres latérales

Barre latérale
Barre latérale
Pliant
Groupe de liste
Entête d'élément de groupe de liste. Wed
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Tues
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Mon
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Wed
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Tues
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Mon
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Wed
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Tues
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Mon
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Wed
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Tues
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.
Entête d'élément de groupe de liste. Mon
Du contenu d'espace réservé dans un paragraphe sous le titre et la date.

Exemples de barres latérales

Barre latérale Exemple 1


<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
      <svg class="bi me-2" width="40" height="32">>use xlink:href="#bootstrap"/></svg>
      <span class="fs-4">Barre latérale</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
          Home
        </a>
       </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
          Tableau de bord
        
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
          Ordres
        
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
          Produits
        
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
          Clients
        
      </li>
      
    </ul>
    

    <div class="dropdown">
      <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
        QZY
      </a>
      <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
        <li><a class="dropdown-item" href="#">Nouveau projet...</a></li>
        <li><a class="dropdown-item" href="#">Règlages</a></li>
        <li><a class="dropdown-item" href="#">Profil</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Déconnexion</a></li>
      </ul>
    </div>
  </div>

Exemples de barres latérales

Barre latérale Exemple 2


 <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
      <svg class="bi me-2" width="40" height="32">use xlink:href="#bootstrap"/></svg>
      <span class="fs-4">Barre latérale</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
          Home
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
          Tableau de bord
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
          Ordres
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
          Produits
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
          Clients
        </a>
      </li>
 </ul>
    <hr>
    <div class="dropdown">
      <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"</svg>
        <img src="https://github.com/mdo.png" alt=="" width="32" height="32" class="rounded-circle me-2">
        QZY
      </a>
  <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
        <li><a class="dropdown-item" href="#">Nouveau projet...</a></li>
        <li><a class="dropdown-item" href="#">Règlages</a></li>
        <li><a class="dropdown-item" href="#">Profil</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Déconnexion</a></li>
      </ul>
    </div>
  </div>

Exemples de barres latérales

Barre latérale Exemple 3


 
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
    <a href="#" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
      <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
      
    </a>
    <ul> class="nav nav-pills nav-flush flex-column mb-auto text-center">
      <li> class="nav-item">
        <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
          <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
        </a>
      </li>
      <li>
        <a href="#" class="nav-link py-3 border-bottom"  title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"</svg>
          <svg class="bi" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
        </a>
      </li>
      <li>
        <a href="#" class="nav-link py-3 border-bottom"  title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"</svg>
          <svg class="bi" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
        </a>
      </li>
      <li>
        <a href="#" class="nav-link py-3 border-bottom"  title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"</svg>
          <svg class="bi" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
        </a>
      </li>
      <li>
        <a href="#" class="nav-link py-3 border-bottom"  title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"</svg>
          <svg class="bi" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
        </a>
      </li>
      
    </ul>
    

      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
      </a>
      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
        <li><a class="dropdown-item" href="#">Nouveau projet...</a></li>
        <li><a class="dropdown-item" href="#">Règlages</a></li>
        <li><a class="dropdown-item" href="#">Profil</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Déconnexion</a></li>
      </ul>
    </div>
  </div>

Exemples de barres latérales

Barre latérale Exemple 4


  
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></a>
      Pliant
    
    <ul class="list-unstyled ps-0">
      <li class="mb-1">
        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
          Home
        </button>
        <div>  class= "collapse show"  id= "home-collapse">
          <ul> class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-dark rounded">Aperçu</a></li>
            <li><a href="#" class="link-dark rounded">Mises à jour</a></li>
            <li><a href="#" class="link-dark rounded">Rapports</a></li>            
          </ul>
        </div>
      </li>
      <li class="mb-1">
        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
          Tableau de bord
        </button>
        <div>  class= "collapse"  id= "dashboard-collapse">
          <ul> class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-dark rounded">Aperçu</a></li>
            <li><a href="#" class="link-dark rounded">Hebdomadaire</a></li>
            <li><a href="#" class="link-dark rounded">Mensuel</a></li>
            <li><a href="#" class="link-dark rounded">Annuel</a></li>
          </ul>
        </div>
      </li>
      <li class="mb-1">
         <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
          Ordres
        </button>
        <div>  class= "collapse"  id= "orders-collapse">
          <ul> class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-dark rounded">Nouvel</a></li>
            <li><a href="#" class="link-dark rounded">Traité</a></li>
            <li><a href="#" class="link-dark rounded">Envoyé</a></li>
            <li><a href="#" class="link-dark rounded">Revenu</a></li>            
          </ul>
        </div>
      </li>
      <li class="border-top my-3"></li>
      <li class="mb-1">
        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
          Compte
        </button>
        <div>  class= "collapse"  id= "account-collapse">
          <ul> class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-dark rounded">Nouveau</a></li>
            <li><a href="#" class="link-dark rounded">Profil</a></li>
            <li><a href="#" class="link-dark rounded">Règlages</a></li>
            <li><a href="#" class="link-dark rounded">Déconnexion</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

Exemples de barres latérales

Barre latérale Exemple 5



<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white"  style="width: 380px;">
    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/>    
      <span class="fs-5 fw-semibold">Groupe de liste</span>
    </a>
    <div class="list-group list-group-flush border-bottom scrollarea">
     <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small>Mer</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Mar</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Mar</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <strong class="mb-1">Entête d'élément de groupe de liste.</strong>
          <small class="text-muted">Lun</small>
        </div>
        <div class="col-10 mb-1 small">Du contenu d'espace réservé dans un paragraphe sous le titre et la date.</div>
      </a>

© 2010-2025 QZYcodes by Quazerty.