Download Protostrap

CSS


This is an overview of useful Protostrap CSS Helper Classes.
They help you speed up your coding to the max.

Helper Classes

Class What it does
.btn-circle btn-circle: Round buttons.

btn-circle

btn-circle-sm

Copy Code      
<div class="btn btn-primary btn-circle">
    <i class="fa fa-search"></i>
</div>
<div class="btn btn-primary btn-circle"> <i class="fa fa-search"></i> </div>
.btn-pile Button Pile : Used to display a group of single toggle buttons as a pile instead of a row

Copy Code      
<div class="btn-group toggleSinglePrimary btn-pile">
    <button class="btn btn-default">Left</button>
    <button class="btn btn-default">Middle</button>
    <button class="btn btn-default">Right</button>
    <button class="btn btn-default">Above</button>
    <button class="btn btn-default">Below</button>
    <button class="btn btn-default">Behind</button>
</div>
<div class="btn-group toggleSinglePrimary btn-pile"> <button class="btn btn-default">Left</button> <button class="btn btn-default">Middle</button> <button class="btn btn-default">Right</button> <button class="btn btn-default">Above</button> <button class="btn btn-default">Below</button> <button class="btn btn-default">Behind</button> </div>
.micropadding Micropadding: Sometimes you need a little more space between things. This inserts an 8px high space
With a regular break:
Continue here
With Micropadding
Continue here
With two breaks:

Continue here

Copy Code      
<div class="micropadding"></div>
<div class="micropadding"></div>
.noborder noborder: Removes all borders from an element.

Copy Code      
<div class="noborder"></div>
<div class="noborder"></div>
.nomargin nomargin: Removes margin from an element.

Copy Code      
<div class="nomargin"></div>
<div class="nomargin"></div>
.nopadding nopadding: Removes padding from an element.

Copy Code      
<div class="nopadding"></div>
<div class="nopadding"></div>
.oneliner oneliner: A line of text that will be cut off when the end of the line is reached, you will see some ellipses instead of the line breaking. This is ideal for titles in cards or on mobile views.
A line of text that will be cut off when the end of the line is reached, you will see some ellipses instead of the line breaking. This is ideal for titles in cards or on mobile views

Copy Code      
<div class="oneliner">A line of text that will be cut off when the end of the line is reached, you will see some ellipses instead of the line breaking. This is ideal for titles in cards or on mobile views</div>
<div class="oneliner">A line of text that will be cut off when the end of the line is reached, you will see some ellipses instead of the line breaking. This is ideal for titles in cards or on mobile views</div>
.simpleList Simple List: A bullet point list with some margin between the entries
  • one
  • two with this.
    And that
  • three

Copy Code      
<ul class="simpleList">
    <li>one</li>
    <li>
        two with this. <br>
        And that
    </li>
    <li>three</li>
</ul>
<ul class="simpleList"> <li>one</li> <li> two with this. <br> And that </li> <li>three</li> </ul>
.table-plain table-plain: make plain table
Name Price / Kg
Apples 3.10
Bananas 2.90

Copy Code      
<table class="table table-plain">
    <tr>
        <th>Name</th>
        <th>Price / Kg</th>
    </tr>
    <tr>
        <td>Apples</td>
        <td>3.10</td>
    </tr>
    <tr>
        <td>Bananas</td>
        <td>2.90</td>
    </tr>
</table>
<table class="table table-plain"> <tr> <th>Name</th> <th>Price / Kg</th> </tr> <tr> <td>Apples</td> <td>3.10</td> </tr> <tr> <td>Bananas</td> <td>2.90</td> </tr> </table>
.table-responsive Responsive Table: This class can be added to a container for tables that are too wide for the viewport
... A table with many columns

Copy Code      
<div class="table-responsive">
    <table>
      ... A table with many columns
    </table>
</div>
<div class="table-responsive"> <table> ... A table with many columns </table> </div>