Utility Classes

We are Small Team of Creative People working together

Float Classes

Class	Description
`float-start`	Element to the left (float:left).
`float-end`	Element to the right(float:right).
`.clearfix`	To Clear floats.(clreafix)

Class	Description
`.d-block`	Element to Show (display: block)
`.d-none`	Element to hide (display: none)

Text Color Classes

Class	Description
`.text-muted`	Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
`.text-primary`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.text-success`	Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
`.text-info`	Nullam id dolor id nibh ultricies vehicula ut id elit.
`.text-warning`	Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
`.text-danger`	Nullam id dolor id nibh ultricies vehicula ut id elit.

Padding Classes

Class	Description
`.p-0`	Padding will be 0px from all side.
`.p-10`	Padding will be 10px from all side.
`.p-20`	Padding will be 20px from all side

Padding Left Classes

Class	Description
`.p-l-0`	Only Padding Left will be 0px.
`.p-l-10`	Only Padding Left will be 10px.
`.p-l-20`	Only Padding Left will be 20px.

Padding right Classes

Class	Description
`.p-r-0`	Only Padding right will be 0px.
`.p-r-10`	Only Padding right will be 10px.
`.p-r-20`	Only Padding right will be 20px.

Padding top Classes

Class	Description
`.p-t-0`	Only Padding top will be 0px.
`.p-t-10`	Only Padding top will be 10px.
`.p-t-20`	Only Padding top will be 20px.

Margin top Classes

Class	Description
`.m-t-5`	Only Margin top will be 5px.
`.m-t-10`	Only Margin top will be 10px.
`.m-t-15`	Only Margin top will be 15px.
`.m-t-20`	Only Margin top will be 20px.
`.m-t-30`	Only Margin top will be 30px.
`.m-t-40`	Only Margin top will be 40px.

Margin Bottom Classes

Class	Description
`.m-b-5`	Only Margin Bottom will be 5px.
`.m-b-10`	Only Margin Bottom will be 10px.
`.m-b-15`	Only Margin Bottom will be 15px.
`.m-b-20`	Only Margin Bottom will be 20px.
`.m-b-30`	Only Margin Bottom will be 30px.
`.m-t-40`	Only Margin top will be 40px.

Margin Right Classes

Class	Description
`.m-r-5`	Only Margin Right will be 5px.
`.m-r-10`	Only Margin Right will be 10px.
`.m-r-15`	Only Margin Right will be 15px.
`.m-r-20`	Only Margin Right will be 20px.
`.m-r-30`	Only Margin Right will be 30px.
`.m-r-40`	Only Margin Right will be 40px.

Margin Left Classes

Class	Description
`.m-l-5`	Only Margin Left will be 5px.
`.m-l-10`	Only Margin Left will be 10px.
`.m-l-15`	Only Margin Left will be 15px.
`.m-l-20`	Only Margin Left will be 20px.
`.m-l-30`	Only Margin Left will be 30px.
`.m-l-40`	Only Margin Left will be 40px.

Vertical Align

Class	Description
`.vt`	Element - vertical align top.
`.vb`	Element - vertical align bottom.
`.vertical-middle`	Element - vertical align middle.

Font Weight

Class	Description
`.fw-lighter`	Font weight will be light (300).
`.fst-normal`	Font weight will be normal
`.fw-bold`	Font weight will be bold (700)

Border

Class	Description
`.border`	Border 1px all side.
`.border-0`	border none all side
`.border-top`	border top 1px
`.border-bottom`	Border bottom 1px.
`.border-start`	border left 1px.
`.border-end`	border right 1px

	Extra small devices Portrait phones (<544px)	Small devices Landscape phones (≥544px - <768px)	Medium devices Tablets (≥768px - <992px)	Large devices Desktops (≥992px - <1200px)	Extra large devices Desktops (>1200px)	xxl large devices Desktops (>1200px)
`.d-none .d-sm-block`	Hidden	Visible	Visible	Visible	Visible	Visible
`.d-sm-none .d-md-block`	Hidden	Hidden	Visible	Visible	Visible	Visible
`.d-md-none .d-lg-block`	Hidden	Hidden	Hidden	Visible	Visible	Visible
`.d-lg-none .d-xl-block`	Hidden	Hidden	Hidden	Hidden	Visible	Visible
`.d-xl-none .d-xxl-block`	Hidden	Hidden	Hidden	Hidden	Hidden	Visible
`.d-xxl-none`	Visible	Visible	Visible	Visible	Visible	Hidden

Background Colors

Class	Description
`.bg-primary`	For Primary background color
`.bg-success`	For Success (green) background color
`.bg-info`	For info (Blue) background color

Class	Description
`.bg-warning`	For Warning (yellow) background color
`.bg-danger`	For Danger (red) background color
`.bg-theme`	For Theme background color

Class	Description
`.bg-theme-dark`	For theme dark background color
`.bg-inverse`	For inverse (dark) background color
`.bg-purple`	For Purple background color

Image Radious

Class	Description
`.rounded`	For rounded corner to image or any element
`.rounded-top`	Only top will be rounded not other
`.rounded-start`	Only right will be rounded
`.rounded-bottom`	Only bottom will be rounded not other
`.rounded-end`	Only left will be rounded not other
`.rounded-circle`	Full circle class
`.rounded-0`	No radious to the element