|Boostrap 5| Border colors don't change

user_15821031 0
Viewed 68

Hy Everyone,

I set my bootstrap rules to change the basic colors (primray, secondary etc...)

Changes are OK for everything (buttons, hovers etc, tables etc) except border colors... and i don't understand why.

Here's some parts of my code.

My array in app.css

@import "~bootstrap/scss/bootstrap";

$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $secondary,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
);
@import "~bootstrap/scss/bootstrap";

and an example of the border use. I've also tried with a full border and it doesn't work also. And any of the color i've changed are rendered.

<li class="nav-item border-bottom border-3 border-primary mb-2">
    <a class="nav-link" href="#">
        <span data-feather="bar-chart-2">Rapports</span>         
    </a>
</li>

Many thanks for your help :)

bootstrap-5 border
1 Answers

You don't want to @import all of bootstrap before the changes. Instead, @import the required SASS source files and then set the changes.

@import "~bootstrap/scss/bootstrap/functions";
@import "~bootstrap/scss/bootstrap/variables";

/* Variable overrides */
$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $secondary,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
);

@import "~bootstrap/scss/bootstrap/";

Demo

user_108175950
Related