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

Display


Introductie

Met de display classes kunt je HTML-elementen weergeven op specifieke posities in andere HTML-elementen.


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

display-container Container voor display
display-topleft Geeft inhoud weer in de linkerbovenhoek van de display-container
display-topmiddle Geeft inhoud weer in het midden boven in de display-container
display-topright Geeft inhoud weer in de rechterbovenhoek van de display-container
display-left Geeft inhoud weer links (links in het midden) van de display-container
display-middle Geeft inhoud weer in het midden (midden) van de display-container
display-right Geeft inhoud rechts (midden rechts) van de display-container weer
display-bottomleft Geeft inhoud weer in de linkerbenedenhoek van de display-container
display-bottommiddle Geeft inhoud weer in het midden van de display-container
display-bottomright Geeft inhoud weer in de rechterbenedenhoek van de display-container
display-hover Toont inhoud wanneer de muis-wijzer over de display-container zweeft
display-position Geeft inhoud weer op een opgegeven positie in de display-container
display-width-100 Stelt de breedte van de display-container in op 100 px
display-width-200 Stelt de breedte van de display-container in op 200 px
display-width-300 Stelt de breedte van de display-container in op 300 px
display-width-400 Stelt de breedte van de display-container in op 400 px
display-width-500 Stelt de breedte van de display-container in op 500 px
display-width-600 Stelt de breedte van de display-container in op 600 px
display-width-700 Stelt de breedte van de display-container in op 700 px
display-width-800 Stelt de breedte van de display-container in op 800 px
display-width-900 Stelt de breedte van de display-container in op 900 px
display-width-1000 Stelt de breedte van de display-container in op 1000 px
display-width-1100 Stelt de breedte van de display-container in op 1100 px
display-width-1200 Stelt de breedte van de display-container in op 1200 px
display-height-100 Stelt de hoogte van de display-container in op 100 px
display-height-200 Stelt de hoogte van de display-container in op 200 px
display-height-300 Stelt de hoogte van de display-container in op 300 px
display-height-400 Stelt de hoogte van de display-container in op 400 px
display-height-500 Stelt de hoogte van de display-container in op 500 px
display-height-600 Stelt de hoogte van de display-container in op 600 px
display-height-700 Stelt de hoogte van de display-container in op 700 px
display-height-800 Stelt de hoogte van de display-container in op 800 px
display-width-full Stelt de breedte van de display-container in op 100%
display-height-full Stelt de hoogte van de display-container in op 100%

Voorbeeld Basic

display-topleft
display-topright
display-bottomleft
display-bottomright
display-left
display-right
display-middle
display-topmiddle
display-bottommiddle

Voorbeeldcode:

<div class="display-container display-height-300 display-width-600 float-center c-blue">
  <div class="display-topleft">display-topleft</div>
  <div class="display-topright">display-topright</div>
  <div class="display-bottomleft">display-bottomleft</div>
  <div class="display-bottomright">display-bottomright</div>
  <div class="display-left">display-left</div>
  <div class="display-right">display-right</div>
  <div class="display-middle">display-middle</div>
  <div class="display-topmiddle">display-topmiddle</div>
  <div class="display-bottommiddle">display-bottommiddle</div>
</div>

Voorbeeld with images and padding

vb
vb
vb
vb
vb
vb
vb
vb
vb

Voorbeeldcode:

<div class="display-container display-height-300 display-width-600 float-center c-blue">
  <div class="padding display-topleft"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-topright"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-bottomleft"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-bottomright"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-left"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-right"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-middle"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-topmiddle"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
  <div class="padding display-bottommiddle"><img alt="vb" width="70" height="70" src="../images/002.jpg" /></div>
</div>

Voorbeeld with background image, padding and hover

plaatje
.display-topleft
.display-topright
.display-bottomleft
.display-bottomright
.display-left
.display-right
Hoover me
.display-topmiddle
.display-bottommiddle

Voorbeeldcode:

<div class="display-container display-height-300 display-width-600 float-center c-blue">
  <img alt="plaatje" class="image-max" src="../images/zomer1.jpg" />
  <div class="padding display-hover display-topleft"><code>.display-topleft</code></div>
  <div class="padding display-hover display-topright"><code>.display-topright</code></div>
  <div class="padding display-hover display-bottomleft"><code>.display-bottomleft</code></div>
  <div class="padding display-hover display-bottomright"><code>.display-bottomright</code></div>
  <div class="padding display-hover display-left"><code>.display-left</code></div>
  <div class="padding display-hover display-right"><code>.display-right</code></div>
  <div class="padding display-middle"><code>Hoover mij</code></div>
  <div class="padding display-hover display-topmiddle"><code>.display-topmiddle</code></div>
  <div class="padding display-hover display-bottommiddle"><code>.display-bottommiddle</code></div>
</div>

Voorbeeld full screen.

Je kunt de display classes ook gebruiken om een afbeelding of element op de volledige breedte en hoogte van een scherm te plaatsen.

Voorbeeld pc - laptop

Voorbeeld mobiel


Voorbeeldcode:

<style>
  html, body {height: 100%}
</style>

<div class="display-container display-height-full display-width-full">
  <img alt="full" class="image-max" src="../images/zomer1.jpg" />
  <div class="padding display-topleft hide-sm"><code>.display-topleft</code><code>.hide-sm</code></div>
  <div class="padding display-topright"><code>.display-topright</code></div>
  <div class="padding display-bottomleft"><code>.display-bottomleft</code></div>
  <div class="padding display-bottomright hide-sm"><code>.display-bottomright</code><code>.hide-sm</code></div>
  <div class="padding display-left hide-sm"><code>.display-left</code><code>.hide-sm</code></div>
  <div class="padding display-right hide-sm"><code>.display-right</code><code>.hide-sm</code></div>
  <div class="padding display-middle"><code>.display-width-full</code><br><code>.display-height-full</code></div>
  <div class="padding display-topmiddle hide-sm"><code>.display-topmiddle</code> <code>.hide-sm</code></div>
  <div class="padding display-bottommiddle hide-sm"><code>.display-bottommiddle</code> <code>.hide-sm</code></div>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster