As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way...
When it comes to customizing Bootstrap Sass, I understand the concept of variable overrides for changing colors, fonts, etc. But what about modifying various components like the Nav component? Is it better practice to override existing classes with my own changes or create new classes and reference them in my HTML?
For instance, if I want a specific navigation style for the header with unique background color, hover effects, font, and border radius, but don't want this style applied to other navs on the page, how should I proceed? What would be the recommended approach?
Currently, I tend to create additional custom variables and a separate class for the specific header nav where the desired styles are implemented.
This is how I've structured my main .scss file:
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (to manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Any default variable overrides go here
// 3. Remaining required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Optional Bootstrap components can be included as needed
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// 5. Add any additional custom code here
Thank you for your assistance!
Edit:
Here's an illustration of a customization. I wanted to alter the hover effect for the nav only in one instance (in the header), so I created a new file named _custom-nav.scss containing this class:
.hover-light {
&:hover {
background-color: $nav-pills-hover-color;
}
}
I would then apply this class in my HTML to achieve the desired styling on my page.
Is this approach considered bad practice? Instead of manually adjusting Bootstrap's nav options, I opted for the custom hover behavior specifically for the header nav.