<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row m-5"> <div class="col-sm-2 user-sidebar"> <div class="nav flex-column nav-pills text-center user-nav" id="sidebar-admin" role="tablist" aria-orientation="vertical"> <span class="nav-menu-title"> Espace client</span> <a class="nav-link user-nav-item user-sidebar-item" data-toggle="pill" href="#profil" role="tab" aria-controls="profil" aria-selected="true">Mon profil</a> <a class="nav-link user-nav-item user-sidebar-item" data-toggle="pill" href="#addresses" role="tab" aria-controls="addresses" aria-selected="true">Mes adresses</a> <a class="nav-link user-nav-item user-sidebar-item" data-toggle="pill" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Paramètres</a> <span class="nav-menu-title"> Suivi des commandes</span> <a class="nav-link active show user-nav-item user-sidebar-item" data-toggle="pill" href="#orders" role="tab" aria-controls="orders" aria-selected="false">Mes commandes</a> </div> </div> <div class="col-sm-10"> <div class="tab-content"> <div class="tab-pane fade" id="profil" role="tabpanel" aria-labelledby="user-communicate-tab"> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <h4><a class="nav-link user-header-block">Informations personnelles</a></h4> </li> </ul> <nav class="navbar"> Infos perso </nav> </div> <div class="tab-pane fade" id="addresses" role="tabpanel" aria-labelledby="user-communicate-tab"> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <h4><a class="nav-link user-header-block">Mes addresses personnelles</a></h4> </li> </ul> <nav class="navbar"> Infos perso </nav> </div> <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="user-users-tab"> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <h4><a class="nav-link user-header-block">Mes paramètres</a></h4> </li> </ul> <div class="row m-3"> changer de mot de </div> <!-- Card --> </div> <div class="tab-pane fade active show" id="orders" role="tabpanel" aria-labelledby="user-requests-tab"> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <h4><a class="nav-link user-header-block">Mes commandes</a></h4> </li> </ul> <div class="row m-3"> <div class="col-sm-9"> <form class="form-inline"> <select class="custom-select"> <option value="1">Toutes</option> <option value="1">En cours</option> <option value="3">Livrée</option> <option value="2">Annulée</option> </select> </form> </div> <div class="col-sm-3"> </div> </div> <div class="row m-3"> <div class="col-sm-12"> <div class="card-container centermx drop-shadow lifted"> <div class="card c-order"> <div class="card-header ch-order "> <div class="d-flex"> <div class="flex-fill"> Commande passée le 31/12/2018 <div><span class="m-strong">Numéro :</span> fsd54-788-212 </div> </div> <div class="flex-fill"> Livraison prévue le 31/12/2018 ^{<i class="fa fa-info-circle" data-toggle="popover" title="Popover title" data-content="Default popover"></i>} <div>En cours</div> </div> <div class="flex-fill"> <span class="m-strong">Total :</span> 30 Euros </div> </div> </div> <div class="card-body cb-order"> <table class="table"> <tbody> <tr> <td><figure class="media"> <div class="img-wrap"><img src="http://bootstrap-ecommerce.com/main/images/items/2.jpg" class="img-thumbnail img-sm"></div> <figcaption class="media-body"> <h6 class="title text-truncate">Product name goes here </h6> <div> X 2 </div> </figcaption> </figure> </td> <td>Prix</td> </tr> <tr> <td><figure class="media"> <div class="img-wrap"><img src="http://bootstrap-ecommerce.com/main/images/items/2.jpg" class="img-thumbnail img-sm"></div> <figcaption class="media-body"> <h6 class="title text-truncate">Product name goes here </h6> <div> X 3 </div> </figcaption> </figure> </td> <td>Prix</td> </tr> </tbody> </table> </div> <div class="card-footer cf-order condensed"> <div class="d-flex"> <div class="flex-fill"> <span class="m-strong">Adresse de livraison</span> <div>Prénom Nom</div> <div>1 Rue Pierre l'avenue</div> <div>7707711 Eden CLOUD </div> </div> <div class="flex-fill"> <span class="m-strong">Mode de paiement</span> <div>Paypal</div> </div> <div class="flex-fill"> <div> <button>Acheter à nouveau</button> </div> <div class="mt-3"> <button>Réclamation</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .user-sidebar{ max-width: 13%; } .user-nav{ border: 1px solid #D5DBDA; } #sidebar-admin{ position: fixed; } .user-sidebar-item{ padding: 1em; } .user-nav-item{ text-align:left; padding-left:1.5rem; color: black; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); -moz-filter: brightness(1.8) grayscale(1) opacity(.7); filter: brightness(1.8) grayscale(1) opacity(.7); } .user-nav-item:hover{ color: black; -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); filter: brightness(1.2) grayscale(.5) opacity(.9); } .nav-menu-title{ font-weight:bold; text-align:left; padding-left:0.5rem; } .user-nav-item.active{ font-weight:600; background: none !important; color: black !important; -webkit-filter: none; -moz-filter: none; filter: none; } .user-header-block{ text-align: left; } .user-filter-button{ background: #78B404; color: white !important; } .user-user-card{ margin-bottom: 10px; } /* Order card*/ .card-container{ border: none; padding: none; /* margin: 10px 10px 10px 10px;*/ } .c-order{ z-index: 10; } .centermx{ margin-left:auto; margin-right: auto; } .ch-order { border-bottom: none; background-color: #EDEDED; } .cb-order{ /* padding: 5px 10px 5px 10px;*/ } .cf-order { border-top: 1px solid #DDD;; background-color: transparent; /*background-color: #DDD;*/ } .m-strong{ font-weight:450; } /*.condensed{ color: rgba(0,0,0,0.5) } */ .drop-shadow { position: relative; border: 1px solid #DDD; /*width: 40%;*/ /*padding: 1em;*/ margin-top: 2em; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; -mox-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -2; } .lifted { -moz-border-radius: 4px; border-radius: 4px; border: none; } .lifted:before, .lifted:after { bottom: 12px; left: 10px; width: 50%; height: 20%; max-width: 300px; max-height: 100px; -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -mox-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .lifted:after { right: 10px; left: auto; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } /* Figure */ .media img { margin-right: 1rem; } .img-sm { width: 90px; max-height: 75px; object-fit: cover; }

$(function () { $('[data-toggle="popover"]').popover() }) $('#example').popover('show');