Admin Dashboard

Helpers

CSS helper classes.


Examples

Margin bottom for block level

To keep the same bottom space of block level element or layout, use .rd-block-level-margin-bottom class.

block without margin bottom
block with margin bottom
block with margin bottom

So, you can put this class into any element you want the same bottom space as block level element.

Clear float

Float item
Float item
After float but cleared the float.

Screen reader only

This is normal text. This is "for screen reader only" which does not appears on screen.

Text alignment

Align left

Align center

Align right

Responsive visibility

This text -><- hidden in all screen sizes.

The text below will be hidden and visible in different screen size. Try to resize the browser to see it in action.

Class Extra small <= Small - Medium - Large - Extra large >=
Class Extra small <= Small - Medium - Large - Extra large >=
Hidden
.hidden-only-…
xs
sm
md
lg
xl
.hidden-under-…
xs
(always visible)
sm
md
lg
xl
.hidden-under-equal-…
xs
sm
md
lg
xl
(always hidden)
.hidden-over-…
xs
sm
md
lg
xl
(always hidden)
.hidden-over-equal-…
xs
(always hidden)
sm
md
lg
xl
Visible
.visible-only-…
xs
sm
md
lg
xl
.visible-under-…
xs
(always hidden)
sm
md
lg
xl
.visible-under-equal-…
xs
sm
md
lg
xl
(always visible)
.visible-over-…
xs
sm
md
lg
xl
(always hidden)
.visible-over-equal-…
xs
(always visible)
sm
md
lg
xl

I'm extra small small medium large extra large screen size.