CSS Helper Classes
Utilizing the preset classes in the Docy theme allows you to quickly and efficiently create your website’s design. Additionally, using pre-defined CSS classes ensures that your website is user-friendly in dark mode. Learn how to optimize your website’s appearance today.
Shadow Classes
Check out these examples of shadows with corresponding class names. Note that the class names are highlighted in red. Explore how to apply these classes and enhance your website’s design today.
shadow-none
No shadowshadow-sm
Small shadowshadow
Regular shadowshadow-lg
Larger shadowColor Classes
bg-white: Use this class to set a white background color, which will be applied automatically.
For black background colors, use the following classes with varying levels of darkness indicated by the suffix after the class name. A smaller number indicates less darkness, while a larger number indicates greater darkness.
A total of 13 classes are available in the theme for different shades of dark colors. Learn how to apply these classes to achieve your desired design today.
black-25, black-50, black-100, black-200, black-300, black-350, black-400, black-500, black-600, black-700, black-800, black-900
Inline Style Classes
Badge
<span class="badge"> badge </span>
Bootstrap Classes
In this case, the content value represents the Elegant Icon code. Please note that you will not find the icon code directly on the Elegant Icon website.
To obtain the code, inspect the icon by right-clicking on it from their website and navigating to the CSS ::before CSS Pseudo-elements to locate the icon code. Check out the GIF below to see the process of inspection and obtaining the icon code.
