Eliminate border-radius property from Bootstrap 4 breadcrumb using Sass styling

Question

Eliminate border-radius property from Bootstrap 4 breadcrumb using Sass styling

Within Bootstrap 4, there exists a Sass variable known as $enable-rounded which

"Enables predefined border-radius styles on various components."

(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)

I need to eliminate the rounded corners specifically on the Breadcrumb component, while keeping them on other elements. Thus, I cannot rely on $enable-rounded for this task.

However, I am uncertain about the most efficient approach to achieve this.

The Sass code in _breadcrumb.scss looks like this:

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
    margin-bottom: $breadcrumb-margin-bottom;
    list-style: none;
    background-color: $breadcrumb-bg;

    @include border-radius($border-radius);
}

How can I override

@include border-radius($border-radius);

without altering _breadcrumb.scss?

All the CSS for my application is consolidated into one file (app.css) compiled from a Sass file (app.scss) that initially includes the necessary Bootstrap 4 Sass files. One option could be:

// app.scss
@import breadcrumb;
@import // other_bootstrap_sass_files


// Customized CSS for my app
.breadcrumb {
    border-radius: 0;
}

This method feels reminiscent of Bootstrap 3, where overriding was necessary.

Is there a more sophisticated way to accomplish this using Sass in Bootstrap 4?

css sass bootstrap-4

Answer 1

Answer №1

In your specific scenario where you are looking to exclude border-radius from breadcrumbs while keeping it for all other components, the only way to achieve this is by following the approach mentioned in your question:

.breadcrumb {
      border-radius: 0;
  }
This might remind you of Bootstrap 3 where customization was needed to remove unwanted styles.

From my perspective, making modifications directly to the original _breadcrumb.scss file seems like the most straightforward option if you wish to maintain consistency across your design elements.

Answer 2

In your specific scenario where you are looking to exclude border-radius from breadcrumbs while keeping it for all other components, the only way to achieve this is by following the approach mentioned in your question:

.breadcrumb {
      border-radius: 0;
  }
This might remind you of Bootstrap 3 where customization was needed to remove unwanted styles.

From my perspective, making modifications directly to the original _breadcrumb.scss file seems like the most straightforward option if you wish to maintain consistency across your design elements.

Answer 3

Answer №2

When you open the _variables.scss file, you'll find all the variables specified with !default - it's like a user preferences file. During compilation of SCSS, your new values will replace the default ones without needing to override the CSS.

It seems that

$breadcrumb-border-radius: $border-radius !default;

is what you're looking for.

Here are two methods to reset that value:

1) Create a duplicate of the _variables.scss file and save it in your project folder (you can rename it to something like _myvariables.scss), locate the variable, remove the !default, and change it to $breadcrumb-border-radius: 0; OR 2) Create a new file, let's say _myvariables.scss, containing $breadcrumb-border-radius: 0; (along with any other default values you wish to modify later).

Then, ensure you import this new file BEFORE your bootstrap scss. In your case, this would be in your app.scss file:

// app.scss
@import myvariables.scss; //no underscore needed because it's a partial
@import // other_bootstrap_sass_files including the breadcrumb component

Now, after compiling the SCSS, the breadcrumb radius will be set to 0 without affecting anything else or having to overwrite any css properties.

Answer 4

When you open the _variables.scss file, you'll find all the variables specified with !default - it's like a user preferences file. During compilation of SCSS, your new values will replace the default ones without needing to override the CSS.

It seems that

$breadcrumb-border-radius: $border-radius !default;

is what you're looking for.

Here are two methods to reset that value:

1) Create a duplicate of the _variables.scss file and save it in your project folder (you can rename it to something like _myvariables.scss), locate the variable, remove the !default, and change it to $breadcrumb-border-radius: 0; OR 2) Create a new file, let's say _myvariables.scss, containing $breadcrumb-border-radius: 0; (along with any other default values you wish to modify later).

Then, ensure you import this new file BEFORE your bootstrap scss. In your case, this would be in your app.scss file:

// app.scss
@import myvariables.scss; //no underscore needed because it's a partial
@import // other_bootstrap_sass_files including the breadcrumb component

Now, after compiling the SCSS, the breadcrumb radius will be set to 0 without affecting anything else or having to overwrite any css properties.

Eliminate border-radius property from Bootstrap 4 breadcrumb using Sass styling

Answer №1

Answer №2

Similar questions

The functionality of my website is not optimized for viewing on iPhones

How to display a specific HTML section to a select group of individuals using PHP

Modifying app aesthetics on-the-fly in Angular

Issue with Bootstrap 4: Dropdown Button Not Functioning

Arranging the rows and columns of a table in optimal alignment

Unable to relocate CSS Loader Container

Tips on displaying two columns as a single column on mobile devices

Transition CSS applied only to links containing images

The Benefits of Semantic Class Names compared to Microdata

What is the best way to show a label and select box side by side using Angular Material?

What is the best way to have an image fill the remaining space within a 100vh container automatically?

Validation failures frequently occur in the typeahead feature of Angular 2 when using Bootstrap 4, despite a value being selected

What is the recommended way to compile SCSS module in a Vue component using Laravel Mix?

Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

"Final" design not functioning properly. Margins

Opening a modal in Bootstrap 4 selectpicker depending on the chosen value

How can a div fill the remaining vertical space, despite the dynamic height of the div above it?

How come my gifs appear tiny even though I've adjusted their width to 32% each?