Slide Navigation

Your content here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, natus temporibus voluptate corporis possimus ab aut cumque.

Homepage

Quick Tips

You may remove all ID or Class names which contain _dm-, they are only used for demonstration.


Boxed Layout

Fluid Layout Remove the .boxed-layout and .centered-layout classes from the body.
Centered Layout Add a class .centered-layout to the body.
Boxed Layout Add a class .boxed-layout to the body.
Boxed Layout with background image

Add background image to the body.

<body class="boxed-layout" style='background-image: url("path_to_img/image.jpg");'>
    ..
    ..
</body>

Or it could be in your own class.

.bg-img {
background-image: url("path_to_img/image.jpg");
}
<body class="boxed-layout bg-img">
    ..
    ..
</body>

Color Schemes

Replace the current Bootstrap CSS and Nifty CSS path with the new path of the CSS color schemes you wish to use.

This is where you can change the color scheme of your app / website.

<head>
    ...
    <title>My Project</title>
    ...

    <!-- STYLESHEETS -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--- -->

    <!-- Bootstrap CSS [ REQUIRED ] -->
    <link rel="stylesheet" href="./assets/css/color-schemes/SELECTED-SCEHEMS/bootstrap.min.css">

    <!-- Nifty CSS [ REQUIRED ] -->
    <link rel="stylesheet" href="./assets/css/color-schemes/SELECTED-SCEHEMS/nifty.min.css">

</head>

Header

Sticky header Add a class .hd--sticky to the #root.
Expanded header Add a class .hd--expanded to the #root.
Expanded header with overlapping content. Add a class .overlapping to the #content > .content__header.
Disable rounded header. Add a class .rounded-0 to the #content > .content__header.

Animations

Add the following class to the body to change the animation transition.

Transition function name Class name
In Quart .in-quart
Out Quart .out-quart
In Back .in-back
Out Back .out-back
In Out Back .in-out-back
easeInOutBack .easeInOutBack
steps .steps
jumping .jumping
rubber .rubber
Nifty

Background Images

Add an image to replace the solid background color
Layouts
Layouts
Transitions
Header
Additional Offcanvas New in BS v.5.0

Select the offcanvas placement.

Sidebars
Navigation
Right sidebar
Color Schemes
Light Completely bright color themes.
Dark Completely dark color themes.
Expanded Header
Fair Header
Full Header
Primary Nav
Brand
Tall Header New in v3.0
Scrollbars

Hides native scrollbars and creates custom styleable overlay scrollbars.

Offcanvas Header
Content Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos nihil earum aliquam quod in dolor, aspernatur obcaecati et at. Dicta, ipsum aut, fugit nam dolore porro non est totam sapiente animi recusandae obcaecati dolorum, rem ullam cumque. Illum quidem reiciendis autem neque excepturi odit est accusantium, facilis provident molestias, dicta obcaecati itaque ducimus fuga iure in distinctio voluptate nesciunt dignissimos rem error a. Expedita officiis nam dolore dolores ea. Soluta repellendus delectus culpa quo. Ea tenetur impedit error quod exercitationem ut ad provident quisquam omnis! Nostrum quasi ex delectus vero, facilis aut recusandae deleniti beatae. Qui velit commodi inventore.