Utils

Class	Description

.dda-container	Defines default container with padding and margin.

.dda-container-fluid	Full-width container without fixed size.

.dda-container-xxl	Container for extra-large screens, max-width 1320px.

.dda-container-xl	Container for large screens, max-width 1140px.

.dda-container-lg	Container for medium-large screens, max-width 960px.

.dda-container-md	Container for medium screens, max-width 720px.

.dda-container-sm	Container for small screens, max-width 540px.

.dda-row	Row layout with gutter spacing and wrapping.

.dda-col	Flexible column with 100% width.

.dda-col-auto	Column with automatic width.

.dda-col-[1-12]	Columns with specific widths (from 8.33% to 100%).

.dda-col-sm-[1-12]	Columns for small screens with specific widths.

.dda-col-md-[1-12]	Columns for medium screens with specific widths.

.dda-col-lg-[1-12]	Columns for large screens with specific widths.

.dda-col-xl-[1-12]	Columns for extra-large screens with specific widths.

.dda-col-xxl-[1-12]	Columns for extra-extra-large screens with specific widths.

.d-inline	Displays element inline.

.d-inline-block	Displays element as inline-block.

.d-block	Displays element as block.

.d-grid	Displays element as grid.

.d-inline-grid	Displays element as inline-grid.

.d-table	Displays element as a table.

.d-table-row	Displays element as a table row.

.d-table-cell	Displays element as a table cell.

.d-flex	Displays element as a flex container.

.d-inline-flex	Displays element as inline flex container.

.d-none	Hides element (display: none).

.flex-fill	Makes flex item fill available space.

.flex-row	Flex container with horizontal row direction.

.flex-column	Flex container with vertical column direction.

.flex-row-reverse	Flex container with reversed horizontal direction.

.flex-wrap	Enables wrapping for flex items.

.flex-nowrap	Prevents wrapping of flex items.

.flex-wrap-reverse	Reverses the wrapping direction of flex items.

.m-[0-5]	Margin utility classes (from 0 to 3rem).

.m-auto	Centers element with auto margin.

.mx-[0-5]	Horizontal margin utility (left and right).

.my-[0-5]	Vertical margin utility (top and bottom).

.mt-[0-5]	Margin-top utility (0 to 3rem).

.me-[0-5]	Margin-right utility (0 to 3rem).

.mb-[0-5]	Margin-bottom utility (0 to 3rem).

.ms-[0-5]	Margin-left utility (0 to 3rem).

.p-[0-5]	Padding utility classes (from 0 to 3rem).

.px-[0-5]	Horizontal padding utility (left and right).

.py-[0-5]	Vertical padding utility (top and bottom).

.pt-[0-5]	Padding-top utility (0 to 3rem).

.pe-[0-5]	Padding-right utility (0 to 3rem).

Class Name	Description

h1, .dda-h1	Font size and weight for h1 headers

h2, .dda-h2	Font size and weight for h2 headers

h3, .dda-h3	Font size and weight for h3 headers

h4, .dda-h4	Font size and weight for h4 headers

h5, .dda-h5	Font size and weight for h5 headers

h6, .dda-h6	Font size and weight for h6 headers

.dda-title	Font size and weight for titles

.dda-body	Font size and weight for body text

.dda-caption	Font size and weight for captions

.dda-label	Font size and weight for labels

a, a:hover	Removes underline from links and defines hover style

button	Applies pointer cursor to buttons

ul	Removes list styling (bullets and padding)

.dda-bg-primary	Primary background color

.dda-bg-secondary	Secondary background color

.dda-color-black	Applies black text color

.dda-rounded-sm	Small border radius

.dda-rounded-md	Medium border radius

.dda-rounded-lg	Large border radius

.dda-rounded-circle	Circular border radius

.dda-gap-16	4rem gap between flex items

.dda-gap-12	3rem gap between flex items

.dda-gap-10	2.5rem gap between flex items

.dda-gap-8	2rem gap between flex items

.dda-gap-6	1.5rem gap between flex items

.dda-gap-5	1.25rem gap between flex items

.dda-gap-4	1rem gap between flex items

.dda-gap-3	0.75rem gap between flex items

.dda-gap-2	0.5rem gap between flex items

.dda-gap-1	0.375rem gap between flex items

::-ms-input-placeholder	Placeholder text color for Internet Explorer

::placeholder	Placeholder text color for other browsers

.dda-flex	Flex container display

.dda-flex-column	Flex direction set to column

.dda-inline-flex	Inline flex container display

.dda-align-center	Centers items along the cross-axis

.dda-justify-space	Distributes items with space between them

.dda-justify-center	Centers items along the main axis

.m-0	Removes margin from element

.p-0	Removes padding from element

.py-0	Removes vertical padding from element

.border-right	Adds a right border to the element

.visually-hidden	Hides element visually but keeps it accessible