2. !

As stated earlier, there are different aspects of you might want to change or override with your own styles. I will show you an example of each.

Change an existing style such as colors, fonts, or borders…

Let’s revisit the change (customization) we made earlier to btn-primary. Instead of only changing the btn-primary, we want to change the primary theme color across the entire CSS. Here’s how this would be done in the custom.scss

custom.scss
/* import only the necessary Bootstrap files */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
/* -------begin customization-------- */
/* change the primary theme color to red */
$theme-colors: (
primary: red;
);

/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Notice: The Bootstrap @import paths are relative to the custom.scss , and will vary depending on your project environment.

As you can see in the custom.scss we @import the Bootstrap files that are needed for the overrides. (Usually, this is just _variables.scss. In some cases, with more complex customizations, you will need the functions and mixins). Make the changes, then @import “bootstrap”. It’s important to make the changes before the @import "bootstrap”. Here’s another example:

Add a new theme color (btn-purple, bg-purple, text-purple, etc..)…

custom.scss
/* import only the necessary Bootstrap files */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
/* -------begin customization-------- */
/* change the primary theme color to red */
$theme-colors: (
primary: red;
purple: $purple; // $purple is defined in _variables.scss
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Change the grid layout breakpoints…

custom.scss
/* import only the necessary Bootstrap files */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
/* --- begin customization ---- */
/* change the primary theme color to red */
$theme-colors: (
primary: red;
);
/* increase the width of the grid lg and xl breakpoints */
$grid-breakpoints: (
lg: 1024px,
xl: 1366px
);
/* increase container width for the wider lg and xl breakpoints */
$container-max-widths: (
lg: 1050px,
xl: 1400px
);
/* --- end customization ------ */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Extend Bootstrap classes with new custom classes (ie: row-dark)…

You can extend existing Bootstrap classes to create new custom classes. For example, here is a new .row-dark class that extends (inherits from) the Bootstrap .row class, and then adds a background-color and color. Notice how these customizations are placed after the @import bootstrap.css.

custom.scss
/* 1. import only the necessary Bootstrap files */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
/* 2. begin customization ---- */
(variable changes as before here...)
/* --- end customization ------ */
/* 3. import Bootstrap to set the changes! */
@import "bootstrap";
/* 4. add @mixin or @extend customizations here */
/* create new custom classes from existing classes */
.row-dark {
@extend .row;
background-color: #333333;
color: #ffffff;
}
/* use @mixins */
.btn-custom {
@include button-variant(red, white, red, red);
}

Once the custom.scss contains the appropriate customizations, you’ll need to compile the SASS to generate the resulting CSS.





Source link https://uxplanet.org/how-to-customize-bootstrap-b8078a011203?source=rss—-819cc2aaeee0—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here