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

Align


Introduction

With these classes you can give text and elements a place on the screen.

With the fixation classes you can fix elements at the top or bottom.


Example text

Click on the Class name to copy it.

center

left

right

justify


Example code:

<h3 class="center">center</h3>
<h3 class="left">left</h3>
<h3 class="right">right</h3>
<h3 class="justify">justify</h3>		

Example elements

Click on the Class name to copy it.


float-left

float-right

float-center


Example code:

<div class="c-blue float-left" style="width: 100px;height: 100px;">
  <p class="center">float-left</p>
</div>
<div class="c-blue float-right" style="width: 100px;height: 100px;">
  <p class="center">float-right</p>
</div>
<div class="c-blue float-center" style="width: 100px;height: 100px;">
  <p class="center">float-center</p>
</div>

Example fixt top

Click on the Class name to copy it.

top


Example code:

<div class="container padding-32 center c-black top"><p>top</p></div>
<div class="container-sm" style="padding-top: 110px;">
  <h1>Scroll</h1>
  <p class="lorum-lg"></p>
  <p class="lorum-lg"></p>
  <p class="lorum-lg"></p>
</div>

Example fixt bottom

Click on the Class name to copy it.

bottom


Example code:

<div class="container padding-32 center c-black bottom"><p>bottom</p></div>
<div class="container-sm" style="padding-bottom: 110px;">
<h1>Scroll</h1>
<p class="lorum-lg"></p>
<p class="lorum-lg"></p>
<p class="lorum-lg"></p>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster