I want the whole .main class starting with "dashboard" to get aligned properly to the top of the page and want it adjacent to the sidebar but it's alignment is going below the sidebar.
This is how my page looks like: https://i.stack.imgur.com/Zp5Av.png Target page look: https://i.stack.imgur.com/bgcoy.png
body{
font-family: 'Rosario' ;
}
.sidebar{
margin:10px -8px 20px 20px;
}
.sidebar>li>a{
padding: 20px 20px;
}
.main{
margin-top: 5px;
padding: 20px;
}
.placeholders{
margin-top: 10px;
margin-bottom: 30px;
}
.placeholder{
margin-bottom: 20px;
}
.placeholder img{
display: inline;
border-radius: 50%;
}
body, .sticky-footer-wrapper {
min-height:100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/adminboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
<link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">
</head>
<body>
<title>Admin Dashboard</title>
<!--navbar starts here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<a class="navbar-brand" href="#">Admin Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-question-circle"></i> Help</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user-plus"></i> Add Users</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="far fa-copy"></i> Add Categories</a></li>
</ul>
</div>
</nav>
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#"><i class="fas fa-chart-area"></i> Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-chart-pie"></i> Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-chart-line"></i> Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-users"></i> Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#"><i class="fas fa-chart-area"></i> Old Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-dollar-sign"></i> Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-globe"></i> Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header"><i class="fa fa-tachometer" aria-hidden="true"></i>
Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
<h4>Label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
<h4>Label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
<h4>Label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
<h4>Label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<h2 class="sub-header">Detailed Result</h2>
<hr>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ID#</th>
<th>Detail 1#</th>
<th>Detail 2#</th>
<th>Detail 3#</th>
<th>Detail 4#</th>
</tr>
</thead>
<tbody>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
<tr>
<td>234</td>
<td>John</td>
<td>Pentesting</td>
<td>China</td>
<td>90$</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="bg-dark text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-3">
<h5>Footer</h5></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-6">I stay at the bottom of the viewport! <span class="small"><br>Unless the page content pushes me further.</span></div>
<div class="col-md-3"></div>
<div class="col-md-3 text-right small align-self-end">©2020 Brand, Inc.</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire