What's the equivalent of the container bootstrap class in purecss.io?

Question

I'm using purecss for my project.

I want to have all my content center on my page like with the bootstrap container class.

I tried to use different things using the purecss grid but I can't figure out how to do it.

Answer 1

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;
  }
}

Answer 2

container value follow Boostrap 4.4,
https://getbootstrap.com/docs/4.4/layout/overview/

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
} 
@media (min-width: 576px) {
    .container {
        width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

Answer 3

.centered{
  margin: 0 auto;
  width: 80%;
}

@media screen and (min-width: 480px) {
    .centered{
          margin: 0 auto;
          width: 95%;
        }
 }

 <div class="centered"> </div>

Answer 4

max-width in bootstrap container

.container {
width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}