Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass

In this chapter, we will start customizing the website that was described and previewed in the previous chapter. We will do that primarily by changing some of the Bootstrap 5 variables that are used for styling all the elements of Bootstrap 5. While doing this, we will change some of the gutter and spacing utility classes being used to better match the new style. We will also use the utility API to modify some of the existing utilities and optimize the layout by using these new utility classes. Finally, we will also add our own Sass to customize the website even further.

In this chapter, there will be many code examples and some screenshots, but I recommend that you explore this customized version of the website in a browser on different device sizes to really see the difference from before.

In this chapter, we’re going to cover the following main topics:

Importing Bootstrap 5 files and custom styles
Default variable overrides
Variable values using existing variables
Utilities
Other custom styling

Technical requirements

To preview the examples, you will need a code editor and a browser. The source code for all code examples can be found here: https://github.com/PacktPublishing/The-Missing-Bootstrap-5-Guide.
To compile Sass to CSS, you will need any of the following:
- Node.js, if you prefer a command-line interface (CLI) using Terminal (macOS) or Command Prompt (Windows)
- Scout-App, if you prefer a graphical user interface (GUI)
- Visual Studio Code, if you prefer to use an extension from the Visual Studio Code Marketplace

All these approaches are explained in Chapter 2, Using and Compiling Sass.

Importing Bootstrap 5 files and custom styles

In Chapter 4, Bootstrap 5 Global Options and Colors, we learned about the bootstrap.scss file and that it contains all the code that will import the individual Sass partial files for the various elements of Bootstrap 5. We will use a slightly different order of these @import statements, which will make customization easier. We will also add @import statements for four of our own SCSS files, which we use to override variables (two files for this), define utilities, and add custom styles, in between the Bootstrap 5 @import statements.

The order of the @import statements is as follows:

Required import of Bootstrap 5’s _functions.scss file
Import of our own _default-variable-overrides.scss file, which is used for default variable overrides
Required import of Bootstrap 5’s _variables.scss file
Import of our own _variable-value-using-variable.scss file, which is used for overriding variable values with existing variables
Required import of Bootstrap 5’s _maps.scss, _mixins.scss, and _root.scss files
Import of optional Bootstrap 5 partial files for layout, content, forms, and components
Import of Bootstrap 5’s _helpers.scss file
Import of Bootstrap 5’s _utilities.scss file
Import of our own _utilities.scss file, which is used to define the utilities that we want to generate using the utility API
Import of Bootstrap 5’s utilities/_api.scss file used to generate the utility classes
Import of our own _custom-styles.scss file, which is used to add any additional custom SCSS

Next, you will see all the code for the @import statements (the comments plus code for the @import statements regarding our own files have been highlighted):

part-2/chapter-8/website/scss/style.scss

// Required
@import "../../../../bootstrap/scss/functions";
// Default variable overrides
@import "default-variable-overrides";
// Required
@import "../../../../bootstrap/scss/variables";
// Variable value using existing variable
@import "variable-value-using-variable";
// Required
@import "../../../../bootstrap/scss/maps";
@import "../../../../bootstrap/scss/mixins";
@import "../../../../bootstrap/scss/root";
// Optional Bootstrap CSS
@import "../../../../bootstrap/scss/reboot";
@import "../../../../bootstrap/scss/type";
@import "../../../../bootstrap/scss/images";
@import "../../../../bootstrap/scss/containers";
@import "../../../../bootstrap/scss/grid";
@import "../../../../bootstrap/scss/tables";
@import "../../../../bootstrap/scss/forms";
@import "../../../../bootstrap/scss/buttons";
@import "../../../../bootstrap/scss/transitions";
@import "../../../../bootstrap/scss/dropdown";
@import "../../../../bootstrap/scss/button-group";
@import "../../../../bootstrap/scss/nav";
@import "../../../../bootstrap/scss/navbar";
@import "../../../../bootstrap/scss/card";
@import "../../../../bootstrap/scss/accordion";
@import "../../../../bootstrap/scss/breadcrumb";
@import "../../../../bootstrap/scss/pagination";
@import "../../../../bootstrap/scss/badge";
@import "../../../../bootstrap/scss/alert";
@import "../../../../bootstrap/scss/progress";
@import "../../../../bootstrap/scss/list-group";
@import "../../../../bootstrap/scss/close";
@import "../../../../bootstrap/scss/toasts";
@import "../../../../bootstrap/scss/modal";
@import "../../../../bootstrap/scss/tooltip";
@import "../../../../bootstrap/scss/popover";
@import "../../../../bootstrap/scss/carousel";
@import "../../../../bootstrap/scss/spinners";
@import "../../../../bootstrap/scss/offcanvas";
@import "../../../../bootstrap/scss/placeholders";
// Helpers
@import "../../../../bootstrap/scss/helpers";
// Utilities
@import "../../../../bootstrap/scss/utilities";
// Define utilities
@import "utilities";
// Utilities API
@import "../../../../bootstrap/scss/utilities/api";
// Own custom styles
@import "custom-styles";

We are now ready to start customizing our website and adding the customization code into the four different files of our own.

We will start with the code for default variable overrides in the _default-variable-overrides.scss file.

Default variable overrides

Filename: _default-variable-overrides.scss

In this file, we will add all customization code regarding colors, global options, global variables, and layout, and some of the customization code regarding forms and components. There will also be customization code regarding forms and components (as well as other customization code) in the _variable-value-using-variable.scss file, which we will take a closer look at later in this chapter.

Color palette

The first thing we want to do is define our own color palette. Together with typography (which we will customize later in this chapter), this is a very important aspect of a visual design that defines a brand.

We override all contextual color classes by assigning them a new hexadecimal color value, but any other ways to define colors can be used. The $secondary, $light, and $dark variables are assigned a color value from the list of gray colors defined in Bootstrap 5, as noted in the comments. The variables for the gray colors are not imported yet, and therefore, we can’t use them as the value for $secondary, $light, and $dark:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 1-10

// Color palette
$primary: #0464a1;
$secondary: #adb5bd; // = $gray-500
$success: #2A9D8F;
$info: #E9C46A;
$warning: #F4A261;
$danger: #E76F51;
$light: #dee2e6; // = $gray-300
$dark: #343a40; // $gray-800

After having defined our own color palette, we will now move on to change one of the global options.

Global options

For this website, we only want to change the shadows option of Bootstrap 5. We set it to true to have box shadows added to various components:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 12-14

// Shadows
$enable-shadows: true;

Global variables

Global variables are variables that are used as values for other variables in many other places. The global variables with the biggest impact are those for spacing and border-radius, which we will change now.

Spacer

We can change the default styling of many Bootstrap 5 elements by modifying the $spacer variable, and we can control the values of the spacing utilities by modifying the $spacers map.

We will use the new spacing values, as seen in the following code:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 17-26

// Spacer
$spacer: 1.5rem;
$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 2,
  5: $spacer * 4,
);

Increasing the spacer affects many elements of Bootstrap 5, including the gutter utilities used with the responsive grid system. To get some more consistent spacing between columns when using nested grid systems, we change the .g-4 class used on the Home page (in the Popular products module), on the Shop page (in the Products overview module), on the Product page (in the Related products module), and on the Wishlist page (in the Products overview module) to .g-3.

Another minor adjustment we need to make is to change the .mt-2 class to .mt-1 on the three <div> elements wrapping the quote icons in the <blockquote> elements on the Product page. See the code change here:

part-2/chapter-8/website/product.html

// Original code
<div class="text-secondary float-start fs-1 lh-1 mt-2 me-2 border-top border-start border-2 border-secondary p-1"><i class="bi-quote"></i></div>
// Updated code
<div class="text-secondary float-start fs-1 lh-1 mt-1 me-2 border-top border-start border-2 border-secondary p-1"><i class="bi-quote"></i></div>

Border radius

We can also change the default styling of many Bootstrap 5 elements by modifying three of the variables related to border radius: $border-radius, $border-radius-sm, and $border-radius-lg. The last border-radius variable, $border-radius-pill, is only used for the border utility, so we won’t change that.

The most radical change would be to set all the variables to 0 to remove the border radius from all elements and have straight corners, but we will instead double the default border radius and slightly adjust the other two:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 28-31

// Border radius
$border-radius: .5rem;
$border-radius-sm: .25rem;
$border-radius-lg: .75rem;

Layout

It’s possible to adjust the styling of the layout regarding breakpoints, containers, and the grid system. If we were to change the number of columns in the grid system, it would require a lot of changes to the markup for our grid systems in our HTML pages, so we will stick to changing the breakpoints and containers for our website.

Breakpoints

The breakpoint settings are used for the grid system and containers as well as for the following elements that have responsive variations: dropdown, list group, modal, navbar, tables, and position helper.

We will increase each breakpoint by 40 pixels to make our grid system differ a bit from the default Bootstrap 5 settings:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 34-42

// Breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 616px,
  md: 808px,
  lg: 1032px,
  xl: 1240px,
  xxl: 1440px
);

Container

Since we increased the breakpoint sizes by 40 pixels, we will also increase our container max width sizes by 40 pixels. It’s not necessary to change both grid breakpoints and container max widths with the same value, but you should make sure to test it when you are making changes to any of those:

part-2/chapter-8/website/scss/_default-variable-overrides.scss 44-51

// Container
$container-max-widths: (
  sm: 580px,
  md: 760px,
  lg: 1000px,
  xl: 1180px,
  xxl: 1360px
);

We have now made several changes to the layout of Bootstrap 5 and will continue to customize the forms.

Forms

Inputs and buttons are already affected by the global variables for border radius that we changed earlier, but not by the global variables for spacers. Therefore, we will adjust the vertical and horizontal padding of both inputs and buttons here. They share the same variables for padding, typography, focus states, and border width, so we only need to override the padding in one place to affect both inputs and buttons:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 53-56

// Inputs and buttons
$input-btn-padding-y: .5rem;
$input-btn-padding-x: 1em;

Components

In the following, we will change various properties of some of the components being used in our website.

Breadcrumb

For the breadcrumb component, we will change the symbol of the breadcrumb divider:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 59-60

// Breadcrumb
$breadcrumb-divider: quote("–");

Carousel

For the carousel component, we will increase the width of the control icons on each side and increase the height and spacing of the indicators:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 62-65

// Carousel
$carousel-control-icon-width: 4rem;
$carousel-indicator-height: 10px;
$carousel-indicator-spacer: 10px;

Dropdown

For the dropdown component, we will set the minimum width to 0, so it doesn’t take up any extra horizontal space when the dropdown items don’t contain much text:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 67-68

// Dropdown
$dropdown-min-width: 0;

Modal

For the modal component, we will increase the size of the large modal variation, increase the opacity of the backdrop, and change the transition when it’s opened and closed:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 70-73

// Modal
$modal-lg: 900px;
$modal-backdrop-opacity: .75;
$modal-fade-transform: rotate(5deg) scale(.9);

Navs

For the navs component, we will increase the vertical padding of the nav links to make them larger:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 75-76

// Navs
$nav-link-padding-y: 1rem;

Progress

For the progress component, we will increase the height, decrease the animation duration, and decrease the transition duration:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 78-81

// Progress
$progress-height: 2rem;
$progress-bar-animation-timing: .5s linear infinite;
$progress-bar-transition: width .4s ease;

Spinner

For the spinner component, we will increase the animation duration to make it spin a little bit slower:

part-2/chapter-8/website/scss/_default-variable-overrides.scss line 83-84

// Spinner
$spinner-animation-speed: 1s;

We have now made all the customizations regarding default variable overrides, so we will move on to further customization with variable values using existing variables.

Variable values using existing variables

Filename: _variable-value-using-variable.scss

In this file, we will add all customization code for content, some of the customization code for forms and components, and the customization code for one helper class. The reason we import this file after the import of the required Bootstrap 5 _variables.scss file is that we want to use existing variables from _variables.scss as the new value when overriding the different variables related to content, some variables for forms and components, and a variable for a helper class. This is especially helpful when we want to assign color variables to other variables.

Some of the code in the _variable-value-using-variable.scss file doesn’t have to be placed there and could as well have been placed in the _default-variable-overrides.scss file. But, I have chosen to group related variables together as much as possible, and that’s why all variables related to for example content have been grouped together here.

Content

The Content category of Bootstrap 5 contains typography, images, tables, and figures. We will make changes to all of that, except for tables.

Typography

As mentioned earlier, typography is a very important aspect of visual design. Because of this, we will make major changes to the overall typography.

First, we will use these two free fonts from Google Fonts: Roboto and Comfortaa. These can be implemented by adding the following three <link> tags to the <head> element just before the closing </head> tag in all HTML files:

*.html line 9-11

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

The two Google Fonts are now available to use, and they will be added as a value to the $font-family-base and $headings-font-family variables in the next code block.

Here’s an overview of all the changes we are making to the typography:

Background color and text color of <body>
Default font family, font size, and line height
Styles for links
Font family, font sizes, font weight, line height, and margin-bottom for regular headings
Font sizes and line height for display headings
Font size for the lead paragraph

See how all these changes are made in the following code:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 2-37

// Typograhy
// Body styles
$body-bg: $gray-100;
$body-color: $gray-700;
// Basic typography styles
$font-family-base: 'Roboto', sans-serif;
$font-size-base: 1.125rem;
$line-height-base: 1.4;
$line-height-sm: 1.2;
// Link styles
$link-decoration: none;
$link-hover-color: shift-color($link-color, $link-shade-percentage);
$link-hover-decoration: underline;
// Heading styles
$headings-font-family: 'Comfortaa', cursive;
$h1-font-size: $font-size-base * 3;
$h2-font-size: $font-size-base * 2.5;
$h3-font-size: $font-size-base * 2;
$h4-font-size: $font-size-base * 1.75;
$h5-font-size: $font-size-base * 1.5;
$h6-font-size: $font-size-base * 1.25;
$headings-font-weight: $font-weight-bold;
$headings-line-height: $line-height-sm;
$headings-margin-bottom: $spacer * 0.25;
// Display styles
$display-font-sizes: (
  1: $h1-font-size * 1.5,
  2: $h2-font-size * 1.5,
  3: $h3-font-size * 1.5,
  4: $h4-font-size * 1.5,
  5: $h5-font-size * 1.5,
  6: $h6-font-size * 1.5
);
$display-line-height: $headings-line-height;
// Lead styles
$lead-font-size: $font-size-base * 1.375;

Images

For images, we will make some changes to the image thumbnail. We will increase the padding, change the background color, change the border color, and decrease the border radius:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 39-43

// Images
$thumbnail-padding: .5rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-color: $gray-500;
$thumbnail-border-radius: $border-radius-sm;

Notice that we just set the background color of image thumbnails to the background color of <body>, which we just changed in the preceding typography code block. We will use that variable ($body-bg) or the related variable for the text color of <body> ($body-color) for all the remaining customizations in this file.

Figures

For figures, we will increase the font size and change the text color for the figure caption:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 45-47

// Figures
$figure-caption-font-size: $font-size-lg;
$figure-caption-color: $body-color;

Forms

We will set the background color of input elements, checkboxes, radio buttons, and select elements. We do this by first assigning the $body-bg value to $input-bg, and then using that variable ($input-bg) as the value for the $form-check-input-bg and $form-select-bg variables:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 49-53

// Form controls
$input-bg: $body-bg;
$form-check-input-bg: $input-bg;
$form-select-bg: $input-bg;

Components

As you can see next, we will place those component variables that need the $body-bg variable as the value for their background color here (in this file and after the customization for content).

Card

For the card component, we will change the background color:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 56-57

// Card
$card-bg: $body-bg;

List group

For the list group component, we will change the background color:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 59-60

// List group
$list-group-bg: $body-bg;

Helpers

Helpers can’t be customized using variables in the _variables.scss file, since they don’t have the same visual properties as the rest of the Bootstrap 5 elements. The exception to this is the ratio helper, which we will see next.

Ratio

The ratio helper classes are generated from the $aspect-ratios Sass map. We can add more values to this map by merging it with a custom map:

part-2/chapter-8/website/scss/_variable-value-using-variable.scss line 62-69

// Ratio
// Create custom ratio map
$custom-ratio: (
  "5x3": calc(3 / 5 * 100%)
);
// Merge "$aspect-ratios" and "$custom-ratio"
$aspect-ratios: map-merge($aspect-ratios, $custom-ratio);

In the preceding code, the new $custom-ratio Sass map is created with the new property and aspect ratio 5 by 3. The value is based on the same calculation as the existing values in the $aspect-ratios Sass map. When these maps are merged, we now get the new .ratio-5x3 helper class. After this change, we need to update the ratio helper class already being used on our Contact page like so:

part-2/chapter-8/website/contact.html

// Original code
<div class="ratio ratio-21x9">
  <iframe src="[URL for Google Maps embed]" 
    allowfullscreen></iframe>
</div>
// Updated code
<div class="ratio ratio-5x3">
  <iframe src="[URL for Google Maps embed]" 
    allowfullscreen></iframe>
</div>

We have now made all the customization for helpers, so we will move on to customizing utilities.

Utilities

Filename: _utilities.scss

In this file, we will add all customization code that uses the utility API. Some utilities have already been customized because their values are based on variables from the _variables.scss file, which we have already been overriding earlier in this chapter. This includes the spacing utilities and various text utilities. Additional customization requires code using the utility API.

Before modifying any utilities with the utility API, we should consider which utilities, of those we are already using, are not adequate or flexible enough in their current form, and then modify them.

For our website, we will improve two things on the Cart page. First, we want to improve the responsive layout of the elements in the Products overview in the Shopping Cart tab pane by using more flexible sizing utilities. Second, we want to adjust our existing use of borders on the <div> element that wraps around our Products overview in the Summary section of the Shipping Details tab pane and Payment Options tab pane by using more flexible border utilities.

Since we’re not just modifying the values of some utilities but are making them more flexible and thus generating more utility classes we can use, we will also have to update the HTML accordingly.

Sizing

We want to change the sizing utility for width, so we can better control the layout of some of the elements across breakpoints. We will make the utilities for width responsive and add the extra properties and values 33: 33% and 67: 67% using the following code:

part-2/chapter-8/website/scss/_utilities.scss line 1-20

// Make sizing utilities for width responsive and add extra 
// values
$utilities: map-merge(
  $utilities,
  (
    "width": (
      property: width,
      responsive: true,
      class: w,
      values: (
        25: 25%,
        33: 33%,
        50: 50%,
        67: 67%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    )
  )
);

This will generate a lot of new responsive width utility classes as well as new classes for the new properties and values we added, so we will now update our HTML in the following way:

part-2/chapter-8/website/cart.html

// Original code
<div class="d-flex align-items-start me-3 mb-3 mb-md-0">[code for product]</div>
<div class="d-flex">
  <div class="input-group w-auto me-3">[code for input 
    group]</div>
  [code for remove button]
</div>
// Updated code
<div class="d-flex align-items-start me-3 mb-3 mb-md-0 w-md-67 w-lg-75 w-xl-67 w-xxl-75">[code for product]</div>
<div class="d-flex w-75 w-sm-50 w-md-33 w-lg-25 w-xl-33 w-xxl-25">
  <div class="input-group w-auto me-3">[code for input 
    group]</div>
  [code for remove button]
</div>

In the preceding code, we are now using 4 and 6 width utility classes, respectively, for two different parts of our layout. If we take the second part, we can see that we are adjusting the width for every existing breakpoint. This is sometimes necessary to get the best possible layout when working with responsive design.

Border

We want to improve the use of borders on the <div> element that wraps around our Products overview in the Summary section of the Shipping Details tab pane and Payment Options tab pane. Currently, there’s a border at the bottom across all breakpoints, and that doesn’t align with the responsive grid layout being used in the Summary section. The elements in the Summary section are stacked on the xs, sm, xl, and xxl breakpoints and turned into a two-column grid on the breakpoints in between (md and lg). We want the border to be placed on the right side for the md and lg breakpoints, and at the bottom for all other breakpoints.

To accomplish this, we need to make the border utilities for border-width, border-bottom, and border-end responsive, and we can do that with the following code:

part-2/chapter-8/website/scss/_utilities.scss line 22-38

// Make border utilities for border-width, border-bottom 
// and border-end responsive
$utilities: map-merge(
  $utilities, (
    "border-width": map-merge(
      map-get($utilities, "border-width"),
      ( responsive: true ),
    ),
    "border-bottom": map-merge(
      map-get($utilities, "border-bottom"),
      ( responsive: true ),
    ),
    "border-end": map-merge(
      map-get($utilities, "border-end"),
      ( responsive: true ),
    ),
  )
);

This will generate a lot of new responsive border utility classes, so we will now need to update our HTML. We will also use spacing utilities for padding and margins to optimize the layout of this part of the page, and the result can be seen in the following:

part-2/chapter-8/website/cart.html

// Original code
<div class="border-bottom border-2 border-light mb-4 pb-4">[code for products]</div>
// Updated code
<div class="border-bottom border-2 border-light mb-4 pb-4 border-bottom-md-0 border-end-md border-md-2 pb-md-0 mb-md-0 border-bottom-xl border-end-xl-0 border-xl-2 pb-xl-4 mb-xl-4">[code for products]</div>

We have now made all customization for utilities, so we will move on to other custom styling.

Other custom styling

Filename: _custom-styles.scss

In this file, we will add all customization code for components that can’t be done by overriding existing variables from the _variables.scss file. Instead, we will target the components using CSS class selectors and modify the styles using a mix of regular CSS and Sass code. Even though we can’t override existing variables, we can still use them as values for our CSS properties, which we will do for the two components in this section.

Alert

We want to add a thick border on the left side of the alert component with the border color inheriting the text color and the thickness being half the value of the $spacer variable:

part-2/chapter-8/website/scss/_custom-styles.scss line 1-4

// Customize the left border of the alert component
.alert {
  border-left: ($spacer * .5) solid;
}

The shorthand for border-left used in the preceding code is equal to the following:

border-left-width: $spacer * .5;
border-left-style: solid;
border-left-color: currentColor;

Because of the default currentColor border-color value, the color of the left border will inherit the color of the text color of the alert, which depends on the type of alert being used. On our website, we currently use the info alert on the Cart page in the Shipping Method section, so the color of the left border will be the $info color.

Offcanvas

We want to give the header of the offcanvas component the same background color and bottom border as the header of the card component. We will use card-related variables from the _variables.scss file as values for our CSS properties. This results in the following code:

part-2/chapter-8/website/scss/_custom-styles.scss line 6-10

// Customize the background color and bottom border of the 
// header of the offcanvas component
.offcanvas-header {
  background-color: $card-cap-bg;
  border-bottom: $card-border-width solid $card-border-color;
}

Summary

In this chapter, we have learned how customization of Bootstrap 5 works in practice in relation to a real website. First, we learned how to mix and order the @import statements for Bootstrap 5 Sass partials and our own Sass partials to achieve maximum customizability. Then, we learned how to customize various elements of layout, content, forms, components, and helpers using Bootstrap 5 variables. After that, we learned how to modify existing utilities using the utility API to make them more flexible and improve the layout of our website. Finally, we learned how we can customize components in other ways than the default ways using our own Sass code.

In the next chapter, we will see how we can improve and extend our website even further, including how to add a custom component and adding interactive features.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass

Create new playlist

Sign In

Sign Up

Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass

Technical requirements

Importing Bootstrap 5 files and custom styles

Default variable overrides

Color palette

Global options

Global variables

Spacer

Border radius

Layout

Breakpoints

Container

Forms

Components

Breadcrumb

Carousel

Dropdown

Modal

Navs

Progress

Spinner

Variable values using existing variables

Content

Typography

Images

Figures

Forms

Components

Card

List group

Helpers

Ratio

Utilities

Sizing

Border

Other custom styling

Alert

Offcanvas

Summary

Table of Contents for
Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass