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


Introductie

U maakt responsieve blokken met de containers, block en panel classes.

De container class kan worden gebruikt in DIV, HEADER, FOOTER, SECTION, ARTICLE, ASIDE etc. elementen om opvulruimte toe te voegen en heeft een lengte van 100%.
De container-sm class heeft geen padding en heeft een lengte van maximaal 900 pixels en is horizontaal uitgelijnd in het midden.
De container-md class heeft geen padding en heeft een lengte van maximaal 1000 pixels en is horizontaal uitgelijnd in het midden.
De container-lg class heeft geen padding en heeft een lengte van maximaal 1200 pixels en is horizontaal uitgelijnd in het midden.
De block class heeft een padding boven en onder van 100 pixels en heeft een lengte van 100%.
De panel class geeft een 100% blok met een rand en een lichtgrijze achtergrondkleur, een padding van 10 pixels rondom en een margin van 16 pixels rondom.
Op de kleinere schermen, bijvoorbeeld een smartphone of tablet, hebben alle containers een breedte van 100%.

Klik op de Class naam om deze te kopiƫren.

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;


Voorbeeldcode:

<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