Bootstrap 3.0 - Grid System

by stefanpetrovic

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container-fluid">
  <div class='row'>
    
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h2 class="panel-title inline">Automated Test Executions On Instances</h2>
          <button type="button" class="btn btn-primary pull-right">Tests Details</button>
        </div>
        <div class="panel-body">
              <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h2 class="panel-title inline">HIDEVIDC</h2> 
          <button type="button" class="btn btn-primary pull-right">Tests Details</button>
        </div>
        <div class="panel-body">
          Body
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h2 class="panel-title inline">HIDEVIDC </h2>
           <button type="button" class="btn btn-primary pull-right">Tests Details</button>
        </div>
        <div class="panel-body">
          Body
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h2 class="panel-title inline">HIDEVIDC</h2> 
           <button type="button" class="btn btn-primary pull-right">Tests Details</button>
        </div>
        <div class="panel-body">
          Body
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"> 
          <h2 class="panel-title inline">HIDEVIDC</h2> 
           <button type="button" class="btn btn-primary pull-right">Tests Details</button>
       ...

CSS

.panel {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.panel-default {
  border-color: #ddd;
}

.panel-default > .panel-heading {
    overflow-wrap: break-word;
}
.panel-default > .panel-heading {
    background-color: #f5f5f5;
    border-color: #ddd;
    color: #3a3f51;
}
.panel-heading {
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;
    padding: 10px 15px;
}

.panel-body {
    padding: 15px;
}

.inline {
    display: inline;
    margin: inherit !important;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
    
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
}