Examples of a component customized with the three different methods

In this section, we will see how we can get the same visual style using the three different methods explained in the previous section. We will customize the default Breadcrumb component from Bootstrap that looks like this:

Figure 1.1 – The default Breadcrumb component

We will add a gray background color, a border radius on all corners, and padding on all sides. We will also increase the horizontal padding on the breadcrumb items and change the divider. The customized version of the Breadcrumb component will then look like this:

Figure 1.2 – The customized Breadcrumb component

The HTML for this component is mostly the same, irrespective of the methods you use to customize the style. The HTML is as follows:

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Sports</a></li>
    <li class="breadcrumb-item"><a href="#">Ball games</a>
    </li>
    <li class="breadcrumb-item active" 
      aria-current="page">Baseball</li>
  </ol>
</nav>

The first two methods use plain CSS and should not require any further explanation. The last example is based on Sass and might not make much sense to you if you are not familiar with Sass. It is, however, included in this chapter to show you the difference in terms of what code is required to achieve the same style using each of these three methods. In the next chapter, I will give a general introduction to Sass and how it is used by Bootstrap.

Method 1 – editing the compiled Bootstrap CSS directly

In the following, we see a slightly edited version of the CSS for the Breadcrumb component found in the compiled and un-minified Bootstrap CSS file (bootstrap.css – line 4494-4525). The changes we need to make to that code to get the specific style that we want are highlighted with a + symbol for new properties and * for changes to a property:

part-1/chapter-1/customization-methods/editing-css/css/bootstrap.css

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: #6c757d;
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) 
           var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
* background-color: var(--bs-gray-300);
* border-radius: 1rem;
+ padding: 1rem;
}
.breadcrumb-item + .breadcrumb-item {
* padding-left: 1rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
* padding-right: 1rem;
  color: var(--bs-breadcrumb-divider-color);
* content: var(--bs-breadcrumb-divider, "·");
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

The divider for the Breadcrumb component is added with the ::before pseudo-element and the content property, as seen in the preceding. We will change the fallback value that comes after the --bs-breadcrumb-divider CSS custom property, since this is not defined by Bootstrap. Alternatively, we could have changed the divider by defining the CSS custom property in the HTML, like so:

<nav aria-label="Breadcrumb" 
  style="--bs-breadcrumb-divider: '·';">

It’s also possible to simply add our new divider directly as the value of the content property, like so:

content: '·';

We will learn more about how to use CSS custom properties in Chapter 10, Using Bootstrap 5 with Advanced Sass and CSS Features.

Method 2 – overwriting the Bootstrap CSS with your own custom styles

Here, we see the custom CSS that we would need to add to our page after the Bootstrap CSS to overwrite the same property values shown in the previous example:

part-1/chapter-1/customization-methods/overwriting-css/css/style.css

.breadcrumb {
  background-color: var(--bs-gray-300);
  border-radius: 1rem;
  padding: 1rem;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 1rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 1rem;
  content: '·';
}

If you compare this example with the previous example, you will see that we are adding/overwriting the exact same properties/values as we added/changed before.

For this to work, remember to reference your own style sheet after the Bootstrap style sheet in your <head> of the HTML file, like this:

part-1/chapter-1/customization-methods/overwriting-css/index.html

<link rel="stylesheet" href="../../../../bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">

Method 3 – customizing the default styles using Sass

Now, we will see the recommended approach to customizing Bootstrap, where we compile the Sass styles with new values for certain Bootstrap variables. This will then give us the visual output we want.

We are first importing some configuration files so that we can use the $spacer variable as a value for the other variables, which we will set right after.

After setting these variables, we will import some other necessary Bootstrap files in the default order, and finally, we will import the Breadcrumb component. We will not be able to use other Bootstrap components, utilities, and so on with the generated style sheet, since we are just focusing on the absolutely necessary files to include for this example:

part-1/chapter-1/customization-methods/using-sass/scss/bootstrap.scss

// Required
@import "../../../../../bootstrap/scss/functions";
@import "../../../../../bootstrap/scss/variables";
@import "../../../../../bootstrap/scss/maps";
@import "../../../../../bootstrap/scss/mixins";
@import "../../../../../bootstrap/scss/root";
// Modified variables
$breadcrumb-bg: $gray-300;
$breadcrumb-border-radius: $spacer;
$breadcrumb-padding-y: $spacer;
$breadcrumb-padding-x: $spacer;
$breadcrumb-item-padding-x: $spacer;
$breadcrumb-divider: quote("·");
// Optional Bootstrap CSS
@import "../../../../../bootstrap/scss/reboot";
@import "../../../../../bootstrap/scss/breadcrumb";

This Sass needs to be compiled by a preprocessor, and we will learn how to do this in the next chapter.

If we compare the code for the three different methods, we can see that method 3 is the most simple and easiest to understand. We are simply declaring the values for some easy-to-understand variables and do not have to use any CSS selectors to do this. This can be used for future versions of Bootstrap as well. Method 1 requires you to edit the compiled Bootstrap CSS again every time you want to use a newer version of Bootstrap 5, while with method 2, the code might need to be changed for future versions of Bootstrap if the class names or HTML structure are changed.