1. Introduction

In this tutorial, we will explore the world of Bootstrap variables and learn how to modify them to customize your Bootstrap themes. By the end of this tutorial, you will be able to customize Bootstrap's default variables to suit your design needs.

You will learn:
- What Bootstrap variables are.
- How to modify Bootstrap variables.
- How to use modified variables in your project.

Prerequisites:
- Basic knowledge of HTML and CSS.
- Understanding of SASS/SCSS.
- Basic understanding of Bootstrap framework.

2. Step-by-Step Guide

Bootstrap Variables

Bootstrap uses SASS variables to customize the design of its components. These variables are defined in the _variables.scss file in Bootstrap's source code. By modifying these variables, you can change the default styling of Bootstrap.

How to Modify Bootstrap Variables

To modify Bootstrap variables, you first need to have a SASS processing setup in your project. This is because Bootstrap's source code is written in SASS.

Once your SASS setup is ready, follow these steps:

1. Import Bootstrap's source code into your project.
2. Before the Bootstrap import, declare your custom values for the variables you want to change.
3. Compile your SASS code into CSS.

Here is a basic example:

$primary: #5a7791;

@import 'bootstrap';

In the above example, the $primary variable is overridden with a custom color before importing the Bootstrap source code.

3. Code Examples

Let's take a look at some examples.

Example 1: Changing Primary Color

// Changing the primary color
$primary: #5a7791;

// Importing Bootstrap
@import 'bootstrap';

Here, we are changing the primary color from Bootstrap's default blue to a custom color.

Example 2: Changing Font Size Base

// Changing the base font size
$font-size-base: 1rem;

// Importing Bootstrap
@import 'bootstrap';

In this example, we are changing the base font size from Bootstrap's default to 1rem.

4. Summary

In this tutorial, we covered how to modify Bootstrap variables to customize the Bootstrap theme. We learned the importance of SASS in the process and saw several examples of how to change different types of variables.

To dive deeper into Bootstrap customization, you can explore the _variables.scss file in Bootstrap's source code to see all the available variables.

5. Practice Exercises

Exercise 1:
Change the $grid-gutter-width variable to 40px.

Solution:

$grid-gutter-width: 40px;
@import 'bootstrap';

Exercise 2:
Change the $border-radius variable to 10px.

Solution:

$border-radius: 10px;
@import 'bootstrap';

Exercise 3:
Combine what you have learned and change the $primary color, $font-size-base, and $grid-gutter-width all at once.

Solution:

$primary: #5a7791;
$font-size-base: 1rem;
$grid-gutter-width: 40px;

@import 'bootstrap';

For further practice, explore other variables in the _variables.scss file and try modifying them.