-
container will leave a large margin
-
container-fluid is full-page
-
rows need to be divided into 12 columns (or fewer that add up to 12)
-
col-md-1, col-md-2 ..
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.col-md-1 {
background-color: red;
}
.col-md-2 {
background-color: lightblue;
}
.col-md-3 {
background-color: blue;
}
.col-md-7 {
background-color: yellow;
}
.col-md-10 {
background-color: green;
}
</style>
<title>Bootstrap grid with fluid container</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">Left 1</div>
<div class="col-md-10">Center 10</div>
<div class="col-md-1">Right 1</div>
</div>
<div class="row">
<div class="col-md-2">Left 2</div>
<div class="col-md-7">Center 2</div>
<div class="col-md-3">Right 3</div>
</div>
</div>
</body>
</html>