index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>Bootstrap Chiasm Example</title>
<style>
.vis-container{
background-color: #90EE90;
border-radius: 20px;
height: 229px;
margin: 10px;
padding-top: 90px;
font-size: 2.592em;
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="scatterplot-container" class="col-sm-4">
<div class="vis-container">Scatter Plot</div>
</div>
<div id="bar-chart-container" class="col-sm-4">
<div class="vis-container">Bar Chart</div>
</div>
<div id="pie-chart-container" class="col-sm-4">
<div class="vis-container">Pie Chart</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="line-chart-container" class="vis-container">Line Chart</div>
</div>
</div>
</div>
</body>
</html>