"Settings"
Bootstrap 4.0.0 Snippet by ivanpeter

Post to Facebook Tweet this

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<!-- Font awesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row bg-dark mb-4 my-4 text-white">
<h2>Change System Settings</h2>
</div>
<div class="row">
<!-- side nav-->
<aside class="col-sm-6 col-md-3 card my-4">
<h3>Company Name</h3>
<hr/>
<ul>
<li>
<a href="#" class="active">
<span class="fa fa-gear"></span>
General settings
</a>
</li>
<li>
<a href="#">
<span class="fa fa-wrench"></span>
account settings
</a>
</li>
<li>
<a href="#">
<span class="fa fa-paint-brush "></span>
theme
</a>
</li>
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
body{
background:rgb(96%, 95%, 94%);
}
#main-content{
background:rgb(100%, 100%, 100%);
min-height:40vh;
}
aside{
max-height:400px;
}
ul li{
list-style:none;
margin-top:5%;
color:rgb(71%, 73%, 75%);
}
ul li a {
color:rgb(71%, 73%, 75%);
}
ul li a:hover {
color:rgb(0%, 48%, 100%);
text-decoration:none;
}
.active{
color:rgb(0%, 48%, 100%);
}
.fa{
margin-right:5%;
}
h1,h2,h3,h4{
padding-left:4%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro Angular

Questions / Comments: