Containers Layout

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.


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
<div class="e-container">
  <!-- Content here -->
</div>

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
  <div class="e-container-fluid">
    <!-- Content here -->
  </div>
  

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
<div class="e-container">
  <div class="e-section">..1</div>
  <div class="e-section">..2</div>
</div>

<!-- or -->

<div class="e-container-fluid">
  <div class="e-section">..1</div>
  <div class="e-section">..2</div>
</div>

Box container

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

Use .e-box


eFrolic | framework css 2018
Efrain Peralta @EfraaX

3h ยท

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

<div class="e-box">
...
</div>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron