div не выравнивается должным образом на странице проекта - PullRequest
Новая
       6

div не выравнивается должным образом на странице проекта

0 голосов
/ 28 февраля 2020

Я хочу, чтобы весь класс .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>

Ответы [ 3 ]

0 голосов
/ 28 февраля 2020

У вас есть проблема в вашем 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/

0 голосов
/ 28 февраля 2020

Вы закрыли 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

0 голосов
/ 28 февраля 2020

Вы, похоже, неправильно поместили 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&amp;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>
...