"Reports Lists"
Bootstrap 4.1.1 Snippet by devlopereswar

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 ---------->
<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="content_box">
<div class="left_bar">
<ul class=" nav-tabs--vertical nav" role="navigation">
<li class="nav-item">
<a href="#lorem" class="nav-link active" data-toggle="tab" role="tab" aria-controls="lorem">Lorem</a>
</li>
<li class="nav-item">
<a href="#ipsum" class="nav-link" data-toggle="tab" role="tab" aria-controls="ipsum">Ipsum</a>
</li>
<li class="nav-item">
<a href="#dolor" class="nav-link " data-toggle="tab" role="tab" aria-controls="dolor">Dolor</a>
</li>
<li class="nav-item">
<a href="#sit-amet" class="nav-link" data-toggle="tab" role="tab" aria-controls="sit-amet">Sit Amet</a>
</li>
</ul>
</div>
<div class="right_bar ">
<div class="tab-content ">
<div class="tab-pane fade show active" id="lorem" role="tabpanel">
<!-- <div class="row">-->
<!-- <div class="col-md-4">-->
<!-- <p> <b>Tester</b> </p>-->
<!-- <p> UI Developer</p>-->
<!-- </div>-->
<!-- <div class="col-md-8 text-right">-->
<!-- <p> +91-938923748 </p>-->
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
.content_box{
float:left;
width:100%;
}
.left_bar{
float:left;
width:15%;
background:#eaf4ff;
height:100vh;
}
.right_bar{
float:left;
width:85%;
padding:15px;
/*border-left:1px solid #ccc;*/
height:100%;
}
.nav-tabs--vertical li{
float:left;
width:100%;
padding:0;
position:relative;
}
.nav-tabs--vertical li a{
float:left;
width:100%;
padding: 15px;
border-bottom:1px solid #adcff7;
color:#1276F0;
}
.nav-tabs--vertical li a.active::after {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: