Settings

In Ace's demo, the settings box has several options which are dynamically applied but you can enable/disable them by default in your app.

Zoom

The zoom option just increases the html element's font size, and because all sizes are in rem and em units, the entire page size changes:

css

html {
    font-size: 0.925rem; /** makes everything smaller **/
    font-size: 1.25rem; /** makes everything 25% larger **/
}

Themes

Choosing a default sidebar or navbar theme is explained in Themes

Navbar becomes fixed by adding .navbar-fixed to .navbar element:

html

<div class="navbar navbar-white navbar-fixed">
    ...
</div>

You can have a fixed navbar only on small devices by adding .navbar-fixed-sm , .navbar-fixed-md , .navbar-fixed-lg , .navbar-fixed-xl:

html

<div class="navbar navbar-white navbar-fixed-sm">
    ...
</div>

<div class="navbar navbar-white navbar-fixed-xl">
    <!-- navbar fixed only on devices below 1200px -->
</div>

Sidebar becomes fixed by adding .sidebar-fixed to .sidebar element:

html

<div class="sidebar sidebar-light sidebar-fixed">
    ...
</div>

Footer becomes fixed by adding .footer-fixed to .footer element:

html

<div class="footer footer-fixed">
    ...
</div>

Boxed Layout

By adding .container to .body-container you can have a boxed layout:

html

<div class="body-container container container-plus">
    ...
</div>

However that doesn't affect a fixed navbar and you should separately handle it by adding .container class to the .navbar-inner element:

html

<div class="navbar navbar-blue navbar-fixed">
    <div class="navbar-inner container container-plus">
        ...
    </div>
</div>

If you want the Not Navbar option in which the navbar fills the entire space (not applicable in Dashboard 2 & 3), you should wrap .navbar-inner's children inside a .container element:
Boxed Layout 2

html

<div class="navbar navbar-blue navbar-fixed">
    <div class="navbar-inner">
        <div class="container container-plus">
            ...
        </div>
    </div>
</div>

You can also add .container only to content area (Enabled by default in demo pages)

html

<div class="page-content container container-plus">
    ....
</div>

You don't need .container-plus but it makes .container elements a little wider in larger screens.

Body Background

When you have boxed layout, you may change body background color or image using Body themes

RTL (right to left)

For RTL mode you should include the relevant CSS files instead of default ones.
They are located in dist/css/rtl folder.

Only the RTL versions should be used. You don't need the default bootstrap.css or ace.css files anymore

If you've built a new ace.css by compiling SASS files, you should rebuild the RTL version as well by running the following command:

bash

npm run css-rtl # first make RTL CSS file
npm run css-min-rtl # then minify the output

html

<html class="rtl" dir="rtl">
 <head>
  <link rel="stylesheet" type="text/css" href="/path/to/dist/css/rtl/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="/path/to/dist/css/rtl/ace.min.css" />
 </head>

</html>

You should also add .rtl class to html element so that some functions work properly in RTL mode.
For example swiping left to hide sidebar becomes swiping right.

👉 Some plugins may require additional files or configuration for RTL. Please refer to their documentation when using a plugin in RTL mode.

👉 For icons, you can either use the opposite direction of the icon in RTL mode, for example replace fa-arrow-left with fa-arrow-right.
Or you can use CSS to flip icons:

css

.fa[class*="-left"], .fa[class*="-right"] {
    transform: scaleX(-1);
}

/* or maybe flip all icons */
.fa, .my-icons {
    transform: scaleX(-1);
}

Fonts

See Fonts and Icons

Settings

Zoom

Themes

Fixed Navbar, Sidebar ...

Boxed Layout

Body Background

RTL (right to left)

Fonts