Discuss

Theme Manager - Advanced Options

On this page

You already know how to customize the basic styles and appearance of your Bootstrap 4 theme, using the Theme Manager. This week we integrated an Advanced Mode, which allows you to customize every single aspect of Bootstrap 4!

Theme Manager Advanced Options

The Advanced Mode allows you to customize every variable of your Bootstrap 4 theme - colors, spacing, fonts, grid breakpoints ... everything you can think of.

Enabling Advanced Mode

In order to enable the Advanced Mode, click the Advanced button in the Theme Manager panel:

Screenshot_1|690x427

In order to customize any option, you need to add it here first. Click the add button to access all the available options:

Screenshot_2|690x427

You can find them in the dialog which appears. The different options are grouped in different categories, for easier navigation:

Screenshot_3|690x427

Using Advanced Options

We will show you a few of examples, showing how to use the Advanced Options of the Theme Manager to style the primary color and the default buttons' padding and borders width.

Changing the Primary Color

In order to change the primary color, we need to add its variable here. Click the add button, open the Colors category and select Primary:

Screenshot_4|690x427

You can see that by default, it uses the $blue variable as a value. You can replace this variable with a specific color, selected using the color picker:

Screenshot_5|690x427

But you can also do this in the Basic Options. So we won't apply this color here. We will show you how to assign a different variable as a primary color.

In order to use a specific variable as a value for the Primary Color option we need to add it here first. So click the add button:

Screenshot_7|690x427

We open the Colors category and select Purple:

Screenshot_8|690x427

You can see the Purple variable added in the variables list. It has a specific color set:

Screenshot_9|690x427

Change the Primary color value to: $purple in order to use the purple color as a primary color. You can see the changes immediately:

Screenshot_10|690x427

You can customize the Purple variable color, by using the color picker:

Screenshot_11|690x427

So now you have a new primary color:

Screenshot_12|690x427

You can do this for all the basic Bootstrap 4 Colors - Primary, Secondary, Success ... etc.

Customizing Buttons

Another example is customizing the buttons. We will show you how to change their padding and border width.

Click the add button:

Screenshot_13|690x427

Open the Inputs category and select Input button padding x - this variable corresponds to the horizontal padding of the buttons:

Screenshot_14|690x427

It has a default value of 0.75rem, which we'd like to change:

Screenshot_15|690x427

We enter a new value of 2rem and the changes are immediately applied:

Screenshot_16|690x427

Then we click the add button:

Under Components category we select Border Width:

Screenshot_18|690x427

The default border width in Bootstrap 4 is 1px:

Screenshot_19|690x427

Let's change that to 3px, the changes are applied immediately:

Screenshot_20|690x427