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


Introduction

The display classes allow you to display HTML elements in specific positions inside other HTML elements.


Click on the Class name to copy it.

display-container Container for display classes
display-topleft Displays content at the top left corner of the display-container
display-topmiddle Displays content at the top middle of the display-container
display-topright Displays content at the top right corner of the display-container
display-left Displays content to the left (middle left) of the display-container
display-middle Displays content in the middle (center) of the display-container
display-right Displays content to the right (middle right) of the display-container
display-bottomleft Displays content at the bottom left corner of the display-container
display-bottommiddle Displays content at the bottom middle of the display-container
display-bottomright Displays content at the bottom right corner of the display-container
display-hover Displays content on hover inside the display-container
display-position Displays content at a specified position in the display-container
display-width-100 Set the width of the display container to 100px
display-width-200 Set the width of the display container to 200px
display-width-300 Set the width of the display container to 300px
display-width-400 Set the width of the display container to 400px
display-width-500 Set the width of the display container to 500px
display-width-600 Set the width of the display container to 600px
display-width-700 Set the width of the display container to 700px
display-width-800 Set the width of the display container to 800px
display-width-900 Set the width of the display container to 900px
display-width-1000 Set the width of the display container to 1000px
display-width-1100 Set the width of the display container to 1100px
display-width-1200 Set the width of the display container to 1200px
display-height-100 Set the height of the display container to 100px
display-height-200 Set the height of the display container to 200px
display-height-300 Set the height of the display container to 300px
display-height-400 Set the height of the display container to 400px
display-height-500 Set the height of the display container to 500px
display-height-600 Set the height of the display container to 600px
display-height-700 Set the height of the display container to 700px
display-height-800 Set the height of the display container to 800px
display-width-full Set the width of the display container to 100%
display-height-full Set the height of the display container to 100%

Example Basic

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

Example code:

<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>

Example with images and padding

vb
vb
vb
vb
vb
vb
vb
vb
vb

Example code:

<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>

Example 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

Example code:

<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>

Example full screen.

You can also use the display to place an image or element at full width and height of a screen.

Example pc - laptop

Example mobile


Example code:

<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