Miscellaneous classes

Borders

You can use the following classes to add borders to an element:

• border-1 , border-l-1 , border-r-1 , border-x-1 , border-t-1 , border-b-1 , border-y-1
• Same for border-0 to border-6

<div class="border-t-3 brc-warning">
  3px top warning border
</div>

The following element has light grey border and a 4px red border on left. The red border is a separate element:

<div class="border-1 brc-grey-l1 pos-rel p-5">
   <div class="position-tl h-102 border-l-4 brc-danger m-n1px"></div><!-- red border -->
</div>

Border style

border-solid border-dotted border-double border-dashed classes are available:

<hr class="border-dotted brc-primary-m4 my-4" />

Border radius

radius-* classes are available as well as radius-l-* radius-r-* radius-t-* radius-b-* from values 0 to 5.
radius-round is also available:

<button class="btn btn-info radius-0">Radius 0</button>
<button class="btn btn-info radius-round">Round</button>

<div class="alert bgc-grey-l4 radius-t-2 border-1 brc-grey-l1">
  Alert with rounded top corners
</div>

Tables

There are some additional classes for tables:

• table-striped-info , table-striped-danger , table-striped-warning , table-striped-success , table-striped-blue , table-striped-default , table-striped-secondary
• You can also use bgc-* background colors for tr elements:

<tr class="bgc-grey-l4 bgc-h-blue-l2">
  ...
</tr>

• Responsive tables are possible by:

  • table-responsive-* class from Bootstrap
  • Using a plugin such as Basictable
  • Dynamic table plugins such as dataTables, BootstrapTable, etc

• Sticky table header is possible by adding .sticky-nav to thead

<thead class="sticky-nav">
 ...
</thead>

Other

Some other classes are used in Ace:

• shadow-md a small shadow around an element