flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Containers


Introduction

You create responsive blocks with the containers, block and panel classes.

The container class can be used in DIV, HEADER, FOOTER, SECTION, ARTICLE, ASIDE and etc. elements to add padding space and has a length of 100%.
The container-sm class has no padding but gives a length of up to 900 pixels and is aligned horizontally in the center.
The container-md class has no padding but gives a length of up to 1000 pixels and is aligned horizontally in the center.
The container-lg class has no padding but gives a length of up to 1200 pixels and is aligned horizontally in the center.
The block class gives padding above and below of 100 pixels and has a length of 100%.
The panel class gives a 100% block with a border and a light gray background color, a padding of 10 pixels around and a margin of 16 pixels around.
On the smaller screens, eg smartphone or tablet, all containers have a width of 100%.

Click on the Class name to copy it.

block

margin-top: 50px;margin-bottom: 50px;


container

container

container-lg

container-lg

container-md

container-md

container-sm

container-sm

panel

padding:10px;border:2px solid #aeb5b5;background-color:#f8f8ff;margin:16px!important;color:#000;


Example code:

<div class="block c-blue center">
  <p><code>margin-top: 50px;margin-bottom: 50px;</code></p>
</div>
<div class="container c-green">
  <p>padding: 0 16px;width: 100%;</p>
</div>
<div class="container-lg c-green">
  <p>max-width: 1200px;margin: auto;</p>
</div>
<div class="container-md c-green">
  <p>max-width: 1000px;margin: auto;</p>
</div>
<div class="container-sm c-green">
  <p>max-width: 900px;margin: auto;</p>
</div>
<div class="panel">
  <p>padding:10px;border:2px solid #aeb5b5;background-color:#f8f8ff;margin:16px!important;color:#000;</p>
</div>

© Copyright by Web Henkie
All right reserved
Webmaster