Bootstrap SASS custom button not showing in tables or cards?

Question

I created the following SCSS to make what used to be the btn-default look in Boostrap 3. If I use the button directly on a page it shows as expected. However, if I use in inside of a table or a card then all I see is the border a text. The background is transparent and the font color is blue like a hyperlink instead of black.

Here is all I added.

.btn-default {
    @extend .btn;
    border-color: #BCBCBC;
}

This is how I use it.

<button type="button" id="btnReset" class="btn-default btn-sm">
    <span class="fas fa-sync-alt" aria-hidden="true"></span> Reset
</button>

UPDATE - FIX

Based on the suggestions below this is what I came up with. It's not exactly the color of the BS3 but I liked it slightly darker than what BS3 used.

.btn-default {
    $color-bg: #DCDCDC;
    $color-border: #BCBCBC;
    $hover-bg: #BFBFBF;
    $active-bg: #BFBFBF;

    @include button-variant( $color-bg, $color-border, $hover-bg, darken($color-border, 10%), $active-bg, darken($color-border, 12.5%) );
}

That's not how you define custom button styles. There is a mixin that you should use, but you've tagged this as bootstrap 4 but say 3 in the question. So we don't know what the correct answer is. — Reactgular, May 23 '18 at 17:44
I'm using Bootstrap 4. I'm trying to make a class called btn-default to look like what is used to in Bootstrap 3. As you can tell I'm still learning BS4 and SASS. So, I need to look up how to use a mixin? — Caverman, May 23 '18 at 17:47

score 1 · Accepted Answer · answered May 23 '18 at 18:00

To create new button styles you have to use the button-variant mixin provided with Bootstrap 4.

For example; this is how I created a white button.

.btn-white {
    $color-bg: #ffffff;
    $color-border: $border-color;
    $hover-bg: #84898F;
    $active-bg: #84898F;

    @include button-variant(
            $color-bg,
            $color-border,
            $hover-bg,
            darken($color-border, 10%),
            $active-bg,
            darken($color-border, 12.5%)
    );
}

This will apply color styles only to the button class, but it will still look like a Bootstrap 4 button.

There is nothing in Bootstrap 4 to help you revert the look of a specific button style to Bootstrap 3. You'll just have to manually apply the styles want yourself to the class.

score 1 · Answer 2 · answered May 23 '18 at 18:40

This is basically a duplicate of: How to set custom button text color in Bootstrap 4 and Sass?

Here's how it's done specifically for btn-default...

.btn-default {
    @include button-variant(#ffffff, #cccccc, #e6e6e6, #adadad, #e6e6e6, #adadad);
}

Then it will work anywhere it's used: https://www.codeply.com/go/luuFNjrIpt

Bootstrap SASS custom button not showing in tables or cards?

2 Answers2