Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 454
BoumTAC Avatar asked Mar 25 '16 22:03

BoumTAC


People also ask

What is the container class in Bootstrap?

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

How many container class are there in Bootstrap?

Bootstrap comes with three different containers: . container , which sets a max-width at each responsive breakpoint. .

What is a container class?

A container class refers to the type of container used to store or move media, for example, a box or a bin. You must create container classes if you intend to use containers. You can base your class definition on the storage capacity of the container.


1 Answers

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;   } } 
like image 143
maljukan Avatar answered Sep 20 '22 10:09

maljukan