CSS utilities
Discover CSS utilities provided out of the box to help further enrich your website.
Bootstrap 5 utilities
Being based on Bootstrap 5, Veello Theme offers some of its default utilities that come along with the library:
Bootstrap helpers and utilities
| Name |
Description |
Actions |
| Clearfix |
Quickly and easily clear floated content within a container by adding a clearfix utility. |
Read more |
| Display |
Quickly and responsively toggle the display value of components and more with our display utilities. |
Read more |
| Flex |
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. |
Read more |
| Float |
Toggle floats on any element, across any breakpoint, using our responsive float utilities. |
Read more |
| Opacity |
Control the opacity of elements. |
Read more |
| Overflow |
Use these shorthand utilities for quickly configuring how content overflows an element. |
Read more |
| Position |
Use these shorthand utilities for quickly configuring the position of an element. |
Read more |
| Ratio |
Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent. |
Read more |
| Sizing |
Easily make an element as wide or as tall with our width and height utilities. |
Read more |
| Spacing |
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. |
Read more |
| Text |
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. |
Read more |
| Text truncation |
Truncate long strings of text with an ellipsis. |
Read more |
| Vertical align |
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. |
Read more |
| Visibility |
Control the visibility, without modifying the display, of elements with visibility utilities. |
Read more |
| Visually hidden |
Use these helpers to visually hide elements but keep them accessible to assistive technologies. |
Read more |
Custom utilities
Below you can find a complete list of our custom CSS classes which you can use as helpers:
Display utilities
| CSS class |
Description |
hide-xs |
Hide element on extra small devices. |
hide-sm |
Hide element on small devices. |
hide-md |
Hide element on medium devices. |
hide-lg |
Hide element on large devices. |
hide-xl |
Hide element on extra large devices. |
opacity-{0,20,40,60,80,100} |
Set element opacity to 0%, 20%, 40%, 60%, 80% or 100%. |
opacity-{0,20,40,60,80,100}-hover |
Set element opacity on hover to 0%, 20%, 40%, 60%, 80% or 100%. |
w-100vw |
Set the element width to 100vw (excluding scrollbar width). |
w-{xs,sm,md,lg,xl,xxl}-100vw |
Set the element width to 100vw for a breakpoint (excluding scrollbar width). |
caption-top |
Display caption on the top of a table. |
row-equal-height |
Make the child elements of a row have an equal height. |
row-{xs,sm,md,lg,xl,xxl}-media-{left,right} |
Makes the left/right column half of the maximum width. It is useful to create a content section with an image and text next to each other. |
row-{xs,sm,md,lg,xl,xxl}-media-{left,right}-stretched |
Makes the left/right column half of the maximum width and causes the media object in that column to fill it in entirely. |
Font utilities
| CSS class |
Description |
main-color |
Use main color. The value is set in the design settings. |
light-color |
Use light font color. The value is set in the design settings. |
dark-color |
Use dark font color. The value is set in the design settings. |
headline-color |
Use headline font color. The value is set in the design settings. |
headline-font |
Use headline font family. The value is set in the design settings. |
Image utilities
| CSS class |
Description |
image-center |
Center align an image container inside the element. |
image-right |
Right align an image container inside the element. |
image-full-width |
Make the image or an image inside the element 100% width. |
image-cover-size |
Make an image inside the element 100% high. |
image-grayscale-hover |
Display an image inside the element in grayscale and colorful on hover. |
Spacing utilities
| CSS class |
Description |
no-margin |
Reset margin of the element and its all paragraphs inside it. |
mb-0-last-child |
Reset margin bottom of the element's last child. |
gutter-bottom-margin |
Set the margin bottom to grid gutter width. |
m-{0-8}-content-margin |
Set margin of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
mt-{0-8}-content-margin |
Set margin top of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
me-{0-8}-content-margin |
Set margin right of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
mb-{0-8}-content-margin |
Set margin bottom of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
ms-{0-8}-content-margin |
Set margin left of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
mx-{0-8}-content-margin |
Set horizontal margin of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
my-{0-8}-content-margin |
Set vertical margin of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
p-{0-8}-content-margin |
Set padding of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
pt-{0-8}-content-margin |
Set padding top of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
pe-{0-8}-content-margin |
Set padding right of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
pb-{0-8}-content-margin |
Set padding bottom of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
ps-{0-8}-content-margin |
Set padding left of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
px-{0-8}-content-margin |
Set horizontal padding of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
py-{0-8}-content-margin |
Set vertical padding of the element to 0-8 size. Value is related to the Content margin design setting and every factor increases value by 0.5. |
Miscellaneous utilities
| CSS class |
Description |
column-content-centered |
Centers the elements inside a column. |
form-wrapper |
Styles the form elements inside the element. |
vee-gallery--logos |
Centers the images and adds spacing between them. Works only with gallery content elements. |
