【问题标题】：div is not getting aligned properly on project pagediv 在项目页面上没有正确对齐
【发布时间】：2020-06-12 21:04:38
【问题描述】：
我希望以“dashboard”开头的整个 .main 类与页面顶部正确对齐，并希望它与侧边栏相邻，但它的对齐方式在侧边栏下方。
这是我的页面的样子：https://i.stack.imgur.com/Zp5Av.png
目标页面外观：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>
【问题讨论】：
标签：
javascript
html
css
web
bootstrap-4
【解决方案1】：
您即将关闭row...
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
...
</div>
<div class="col-sm-9 col-md-10 main">
...
</div>
</div>
</div>
https://codeply.com/p/JUZFrdWqzc
【解决方案2】：
您的 HTML 有问题。该行不包含仪表板和左列：
<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> <-------------------- This closing div shouldn't be here, rather at the end of the upcoming 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>
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;
}
<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">
<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 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>
https://jsfiddle.net/9kp8dqcu/
【解决方案3】：
您似乎将main 放在.row 之外，这就是它没有正确对齐的原因：
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 cz-shortcut-listen="true">
<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 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>
</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>