CSS Helper Classes

Summary: Elevate your website effortlessly with Docy theme's preset classes. Integrate stunning shadow and color effects, experiment with Bootstrap components, and create a seamless, visually impressive, and user-friendly experience for your visitors.

Elevate your website design effortlessly with the preset classes available in the Docy theme. Harness the power of pre-defined CSS classes not only to streamline your design process but also to ensure a seamless user experience in both light and dark modes. Discover the art of optimizing your website’s appearance with Docy today.

Shadow Classes

Explore a range of shadow examples paired with their corresponding class names. Easily integrate these classes into your design, highlighted in red for quick identification. Elevate your website’s visual appeal by applying these shadow classes:

Color Classes

Effortlessly set background colors with the following classes:

• bg-white: Automatically applies a white background color.

For black background colors, utilize the following classes, each indicating a different level of darkness by the suffix after the class name. Experiment with 13 classes for varying shades of dark colors, where smaller numbers signify lighter shades, and larger numbers indicate deeper darkness:

• black-25, black-50, black-100, black-200, black-300, black-350, black-400, black-500, black-600, black-700, black-800, black-900

Enhance your design palette by learning how to seamlessly apply these classes to achieve your desired visual effect.

Inline Style Classes

Integrate the badge class effortlessly into your content for a stylish touch:

<span class="badge"> badge </span>

Bootstrap Classes

Discover the seamless integration of Bootstrap classes, enhancing your website’s functionality and aesthetics. Follow these steps to incorporate Bootstrap code into your Docy-themed website:

• Add Bootstrap Classes: Apply Bootstrap classes directly to your HTML elements to leverage the framework’s features. For example, use the following class to create a responsive container: <div class="container"> <!-- Your content goes here --> </div>
• Explore Components: Dive into Bootstrap’s extensive component library to enhance your website further. Utilize classes for navigation bars, cards, forms, and more.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Your navigation bar content -->
</nav>

<div class="card" style="width: 18rem;">
    <!-- Your card content -->
</div>

• Combine with Docy Classes: Mix and match Docy classes with Bootstrap to achieve a unique and visually appealing design. Experiment with shadows, colors, and Bootstrap components to create a harmonious and user-friendly website.

In conclusion, harness the power of Docy theme’s preset classes and seamlessly integrate Bootstrap to elevate your website’s design effortlessly. From shadow and color classes to inline styles and Bootstrap components, the synergy of these tools allows you to craft a visually appealing and user-friendly website. Explore the art of optimization, combining the strengths of Docy and Bootstrap for a truly unique and captivating online presence.