During the installation of Bootstrap 5, I encountered an issue where many of my buttons are displaying a black font instead of the expected white font as shown in the Bootstrap 5 Documentation
For instance, the .btn-primary button on the official Bootstrap docs looks like this:
https://i.sstatic.net/eEII1.png
However, when utilizing the exact same HTML code, I end up with this result:
https://i.sstatic.net/KLe06.png
Upon examining both their example and mine, it seems that not only is the text color different, but the background color is also not consistent. Upon inspecting my compiled .css file, I noticed that several of the bootstrap colors used throughout the code appear "washed out," resembling the blue hue in the button. After using Chrome dev tools, it appears that this style is originating from the Bootstrap files themselves rather than any inadvertent styling I may have applied. The SCSS compiles down to CSS files through the standard Laravel setup (webpack mix), and I solely rely on NPM packages for bootstrap 5.
window.bootstrap = require('bootstrap');"bootstrap": "^5.1.3",The content of my app.scss file is quite minimal:
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";
// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";
// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";
// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";
// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";
h1 {
font-family: 'Lobster', cursive;
}
a.torn-link {
color: $orange;
}
.ttt-title {
font-family: 'Lobster', cursive;
}
.card-title {
font-family: 'Cuprum', sans-serif;
}
html {
background-color: #fff;
color: #636b6f;
}
body {
background-color: #fff;
color: #636b6f;
}
.links {
>a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
}
#settings-button {
&:hover {
fill: rgba(189, 189, 189, 0.25);
}
}
.ui-dialog-title {
font-family: 'Cuprum', sans-serif;
}
thead, th {
text-align: center;
}
Edit: It seems even the colored links specified by Bootstrap exhibit a washed-out appearance. For instance, the yellow from .link-warning is barely visible due to its faint color intensity, which undermines readability. In contrast, the yellow displayed on the official page is distinctively clear. Therefore, this issue does not stem from mistakenly applying styles to buttons or elements.
Edit2:
This showcases how my button appears within the developer tools, highlighting the disparity in colors compared to those in the Bootstrap 5 documentation.
https://i.sstatic.net/aqMif.png
Furthermore, the button's CSS property is solely derived from the compiled app.css file generated via webpack:
https://i.sstatic.net/q4Sls.png
Edit 3: Contents of my _variables.scss file:
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;