What's the equivalent of the container bootstrap class in purecss.io?
Trust only in source young Luke:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Only after the update of original question i realized you where referring to Pure framework.
I took a look at the source of the source https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css and realized that it adds no sizing on pure-g
which is a grid wrapper just like container
from Bootstrap.
So, the Pure framework is more generic than Bootstrap and it is perfectly reasonable for you to specify the width of that container by yourself to whatever you want.
Just apply Bootstrap container
rules to pure-g
class:
.pure-g {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.pure-g {
width: 750px;
}
}
@media (min-width: 992px) {
.pure-g {
width: 970px;
}
}
@media (min-width: 1200px) {
.pure-g {
width: 1170px;
}
}
.centered{
margin: 0 auto;
width: 80%;
}
@media screen and (min-width: 480px) {
.centered{
margin: 0 auto;
width: 95%;
}
}
<div class="centered"> </div>