Support Center

How can we help you today ?

 Home / Porto / Customization / CSS Helper Classes

CSS Helper Classes

Porto CSS Helper Classes

Text Helpers

Class Description
.text-primary Changes text color to the primary color
.text-primary-inverse Changes text color to the primary color inverse
.text-dark Changes text color to dark version
.text-dark-inverse Changes text color to dark version inverse
.text-light Change text color to light version
.text-uppercase Uppercase text
.text-lowercase Lowercase text
.text-capitalize Capitalize text

Spacements

 

Class Description
.m-none Changes all margins to none
.m-auto Changes margin to 0 auto
.m-xs Changes all margins
.m-sm Changes all margins
.m-md Changes all margins
.m-lg Changes all margins
.m-xl Changes all margins
.m-xlg Changes all margins
.mt-none Changes margin-top to none
.mt-xs Changes margin-top
.mt-sm Changes margin-top
.mt-md Changes margin-top
.mt-lg Changes margin-top
.mt-xl Changes margin-top
.mt-xlg Changes margin-top
.mb-none Changes margin-bottom to none
.mb-xs Changes margin-bottom
.mb-sm Changes margin-bottom
.mb-md Changes margin-bottom
.mb-lg Changes margin-bottom
.mb-xl Changes margin-bottom
.mb-xlg Changes margin-bottom
.mr-none Changes margin-left to none
.ml-xs Changes margin-left
.ml-sm Changes margin-left
.ml-md Changes margin-left
.ml-lg Changes margin-left
.ml-xl Changes margin-left
.ml-xlg Changes margin-left
.mr-none Changes margin-right to none
.mr-xs Changes margin-right
.mr-sm Changes margin-right
.mr-md Changes margin-right
.mr-lg Changes margin-right
.mr-xl Changes margin-right
.mr-xlg Changes margin-right
.p-none Changes all paddings to none
.p-auto Changes padding to 0 auto
.p-xs Changes all paddings
.p-sm Changes all paddings
.p-md Changes all paddings
.p-lg Changes all paddings
.p-xl Changes all paddings
.p-xlg Changes all paddings
.pt-none Changes padding-top to none
.pt-xs Changes padding-top
.pt-sm Changes padding-top
.pt-md Changes padding-top
.pt-lg Changes padding-top
.pt-xl Changes padding-top
.pt-xlg Changes padding-top
.pb-none Changes padding-bottom to none
.pb-xs Changes padding-bottom
.pb-sm Changes padding-bottom
.pb-md Changes padding-bottom
.pb-lg Changes padding-bottom
.pb-xl Changes padding-bottom
.pb-xlg Changes padding-bottom
.pr-none Changes padding-left to none
.pl-xs Changes padding-left
.pl-sm Changes padding-left
.pl-md Changes padding-left
.pl-lg Changes padding-left
.pl-xl Changes padding-left
.pl-xlg Changes padding-left
.pr-none Changes padding-right to none
.pr-xs Changes padding-right
.pr-sm Changes padding-right
.pr-md Changes padding-right
.pr-lg Changes padding-right
.pr-xl Changes padding-right
.pr-xlg Changes padding-right

Others

 

Class Description
.ib Changes display to inline-block and set vertical-align to top
.va-middle Changes vertical-align to middle
.bg-success Changes background and text color to inverse color of background
.bg-warning Changes background and text color to inverse color of background
.bg-danger Changes background and text color to inverse color of background
.bg-info Changes background and text color to inverse color of background

Glad we could be helpful. Thanks for the feedback.

Sorry we couldn't be helpful. Your feedback will help us improve this article.

How helpful was this page?

  
Updated on Fri, 26 Oct 2018 by Ishita Gupta

In this section

Related articles