Bootstrap Snippet My Account using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

"My Account"
Bootstrap 4.1.1 Snippet by kodakro

Related: See More

Questions / Comments:

"My Account" Bootstrap 4.1.1 Snippet by kodakro

Related: See More

Questions / Comments:

"My Account"
Bootstrap 4.1.1 Snippet by kodakro