Tak by to mogło wyglądać:
<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
body {
background-color: black;
}
.rectangle {
font-size: 70px;
}
.singleHeight {
height: 142px;
padding: 10px;
}
.singleHeight > div {
padding: 15px;
height: 100%;
}
.doubleHeight {
height: 284px;
padding: 10px;
}
.doubleHeight > div {
padding: 15px;
height: 100%;
}
.glyphicon {
font-size: 65px;
}
</style>
<body>
<div class="container text-center">
<div class="rectangle row text-muted">
<div class="col-md-6 text-left">
Jan Kowalski
</div>
<div class="col-md-6 text-center">
12:00:00
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 singleHeight">
<div class="bg-primary">
<span class="glyphicon glyphicon-music"></span><br />
Kim jestem?
</div>
</div>
<div class="col-md-6 singleHeight">
<div class="bg-success">
<span class="glyphicon glyphicon-search"></span><br />
Co oferuje?
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 singleHeight">
<div class="bg-info">
<span class="glyphicon glyphicon-star"></span><br />
Kim jestem?
</div>
</div>
<div class="col-md-6 singleHeight">
<div class="bg-warning">
<span class="glyphicon glyphicon-cloud"></span><br />
Co oferuje?
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 singleHeight">
<div class="bg-danger">
Talk is cheap. Show me the code!<br />
- Linus Torvalds, twórca Linuxa
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 doubleHeight">
<div class="bg-primary">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 singleHeight">
<div class="bg-success">
<span class="glyphicon glyphicon-envelope"></span><br />
</div>
</div>
<div class="col-md-3 singleHeight">
<div class="bg-info">
<span class="glyphicon glyphicon-glass"></span><br />
</div>
</div>
<div class="col-md-3 singleHeight">
<div class="bg-warning">
<span class="glyphicon glyphicon-user"></span><br />
</div>
</div>
<div class="col-md-3 singleHeight">
<div class="bg-danger">
<span class="glyphicon glyphicon-heart"></span><br />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ale zwróć uwagę bootstrap to nie tylko grid i responsywność