Use the class.container to wrap the content of a page and easily centre it, as demonstrated below.
<div class = "container">
…
</div>
Take a peek at the bootstrap.css file's.container class.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Containers are not nestable by default due to padding and defined widths.
Examine the bootstrap.css file.
@media (min-width: 768px) {
.container {
width: 750px;
}
}
CSS has media-queries for containers with width, as you can see. This aids in the implementation of responsiveness, and the container class is updated accordingly to represent the grid system correctly.
