Darko Bootstrap 5 HTML Template

Official docs for the Darko Bootstrap Template


Folder Structure

When you purchase Darko, you will get all files nicely sorted in a folder like this:

  • theme
    • .htaccess
    • index.html
    • about.html
    • blog.html
    • shop.html
    • etc...
    • css/
      • darko.css
    • icons/
    • img/
    • scss/
      • _theme.scss
      • darko.scss
      • darko-light.scss
      • bootstrap-extensions/
        • _background_faders.scss
        • _background_utilities.scss
        • etc...
    • js/
      • csvtable-min.js
      • darko-min.js
      • map-min.js
    • libs/

How to render your own CSS

The files "darko.scss" and "darko-light.scss" contain only variables and paths to additional files to be rendered. To create your own stylesheet, you can for example copy one of the two files and modify it as you like. Then you have to render the file with a SASS compiler. The Bootstrap documentation will help you to find other available variable names for your template.

Example darko.scss

$spacer: 0.8rem;
$primary: lighten(orange,20%);
$secondary: darken($primary,20%);
$info: lightblue;
$dark: #191d25;
$light: #eee;
$red: #b7173a;
$yellow: orange;

DARKO's Bootstrap CSS Classes

Darko consistently uses bootstrap variables, which makes custom implementation easy. In addition, some CSS classes have been newly added, which make Darko particularly comprehensive. These new classes also follow the innovative logic of the Bootstrap framework and are therefore easy to use.

Background Faders

This set of custom CSS classes allows you to put a transparent gradient over any container with a background image. The color style and rotation of the CSS gradient can be set by different classes. See a demo here.


You can choose from 8 theme colors by default. Example: .bg-fade-primary or .bg-fade-danger and so on. See also Bootstrap Theme Colors


In order to us these classes, you need to add bg-fade-(color) to your container first. You can choose from 5 rotation presets by default. Of course you can extend the array when compiling your own Stylesheet.

$bg-gradient-rotations: (
  '45deg': 45deg,
  '90deg': 90deg,
  '180deg': 180deg,
  '270deg': 270deg,
  '360deg': 360deg

Background Utilities

Some useful utilities for background images. See a demo here.

Product Image
Code HTML5
Last update: 30.6.2023 16:19