Utility Classes

Simple and functional class names for behavior tweaks.

Floating elements

.pull-left

Floats an element to the left.

        
  <div class="pull-left">...</div>

.pull-right

Floats an element to the right.

      
  <div class="pull-right">...</div>

.clearfix

Clears the float on any element.

            
  <div class="clearfix">...</div>

Text variations

We have included some text variations that will help you give more importance to a certain sentence, or word.

.text-uppercase

Transforms the text to uppercase. Handy when you want to force the uppercase on a text.

            
  <p class="text-uppercase">...</p>

.text-muted

Slightly decreases the color for a text, which is #666666.

            
  <p class="text-muted">...</p>

.text-error

This is a helpful class to highlight a chunk of text that you want the user to notice, probably because of an error. The default color is #C0392b.

            
  <p class="text-error">...</p>

.text-success

This is a helpful class to highlight a chunk of text that you want the user to notice and let them know they are doing something right. The default color is #27AE60.

            
  <p class="text-success">...</p>

Text alignment

Align text is really easy on Furatto, we provide 3 ways to achieve this .text-right, .text-center and .text-justify

Text aligned to the rightLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

       
  <p class="text-right">...</p>

Text align to the centerLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

       
  <p class="text-center">...</p>

Text justifiedLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

       
  <p class="text-justify">...</p>

Content classes

You can easily manage the content with these 3 handy class names that will rock you world.

.vertical-align

This really helpful class will align any element vertically, yes is true. The only caveat is that the parent element has to have a height.

        
<div style="height:300px">
   <p class="vertical-align">...</p>
</div>

.nopadding

Removes the padding from any element, we have been using this on some columns, just when it is necessary.

            
  <div class="nopadding">...</div>

.hidden

Hides any element on the markup by adding the display: none css rule.

            
  <div class="hidden">...</div>

Search for documentation