CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3bootstrap-4
Pascal
Pascal

Reputation: 12885

Where has .btn-default gone in Bootstrap 4?

According to the Bootstrap 3 to Bootstrap 4 migration docs:

Buttons

  • Renamed .btn-default to .btn-secondary.

But the Bootstrap 4 .btn-secondary does not look at all like the old default button.

Bootstrap 3:

bootstrap 3 default button

Bootstrap 4:

bootstrap 4 primary secondary light

Using .btn-light does not reproduce the original .btn-default either.

How do I get my default theme back for buttons/dropdowns, etc?

I remember a default button in Bootstrap 4, but it was in an earlier alpha version. Has it been removed?

Upvotes: 23

Views: 11292

Answers (4)

Gustavo Mauricio De Barros
Gustavo Mauricio De Barros

Reputation: 359

At Bootstrap 5.3 you can simply:

.btn-default {
    --bs-btn-font-weight: 400;
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-focus-shadow-rgb: #8c8c8c;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
}

Upvotes: 0

Jack Miller
Jack Miller

Reputation: 7657

Another "fix" is to define default as theme color in your SCSS files:

$theme-colors: ( "default": lightgray, "primary": ...)

Then .btn-default (and the other "default" classes) are back.

Upvotes: 0

Ghulam Abbas
Ghulam Abbas

Reputation: 535

add this css to your stylesheet file problem gone

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}
.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

Upvotes: 12

WebDevBooster
WebDevBooster

Reputation: 14964

The btn-outline-secondary class in Bootstrap 4 generates the closest to what used to be btn-default in Bootstrap 3.

That seems to be "typo" there in the docs.

primary is the blue button/color and secondary is the grey ones.

And the very light grey is btn-light.

Here's the reference link for Bootstrap 4 buttons:

https://getbootstrap.com/docs/4.0/components/buttons/

Upvotes: 21

Related Questions