--- layout: default category: layout permalink: /container title: Containers description: "Containers are a simple design element to center your content horizontally. By default a container maintains margins on the sides to maintain an adequate proportion, however this can be eliminated.

The containers can be used in any context, as a parent or as a direct child of any of the elements." ---

{{ page.title }} Layout

{{ page.description }}

Responsive breakpoints

The containers are intervened in some points of the viewport to provide a better experience and spacing. We use the following breakpoints for each type of device.

In smartphones from 320px to 767px: width : 92.50%; Uses 92.50% of the total width of the viewport.

In tablets from 768px to 1023px: max-width : 720px; the container will have a maximum width of 720px.

In Desktop from 1024px to 1366px: max-width : 976px; the container will have a maximum width of 976px.

In Desktop-plus from 1366px and up: max-width : 1366px; the container will have a maximum width of 1366px.


See example in a window

Header
Main
Aside
{% highlight html %}
{% endhighlight%}

Fluid container

Use .e-container-fluid for a full width container, spanning the entire width of the viewport.


See example in a window
Header
Main
Aside
{% highlight html %}
{% endhighlight%}

Section container

A simple container that adds a space to divide your page into sections. Recommended use accompanied by a fluid or spaced container.

Use .e-section


See example in a window {% highlight html %}
..1
..2
..1
..2
{% endhighlight%}

Box container

A simple container that adds a space to divide your page into sections.

Use .e-box


{{site.title}} | framework css {{ site.time | date:
Efrain Peralta @EfraaX

3h ยท

Lorem ipsum dolor sit amet, consectetur adipisicing elit magna aliqua.

{% highlight html %}
...
{% endhighlight%}