Bootstrap - dash mock up

2016

by katalin_2003

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div class="container-fluid">

  <div class="row">
    <div id="card-1" class="col-md-6 col-sm-6">
      <div class=" panel panel-success">
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body">
          Activity dashboard
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>
    <div id="card-2" class="col-md-6 col-sm-6">Visits</div>
  </div>

  <div class="row">
    <div id="card-3" class="col-md-6 col-sm-6">Pipeline</div>
    <div id="card-4" class="col-md-6 col-sm-6">Maps</div>
  </div>
</div>

CSS

.container-fluid {
  background-color: red;
  height: 880px;
}

#card-1 {
  background-color: #2196F3;
}

#card-2 {
  background-color: #FFEB3B;
}

#card-3 {
  background-color: #4CAF50;
}

#card-4 {
  background-color: #673AB7;
}