Examples of user interfaces with a customized version of Bootstrap 5

In this section, we will see four examples of user interfaces using a customized version of Bootstrap 5. For each example, we will first see a screenshot of the user interface using the default Bootstrap 5 styles and then a screenshot of the user interface using a customized version of Bootstrap 5. This will then be followed by a list of what has been customized. We will start with a simple example of one UI element, where we can better see the actual changes, and then have a look at three different full-page examples. All screenshots, as well as the complete customized examples, can be found in the accompanying code for this book in the following folder: part-1/chapter-1/example-user-interfaces/. I recommend that you look at those while going through these examples and the lists of what has been customized to have a better understanding of the actual changes.

The card component

The following is the first example, which is a Bootstrap 5 card component. Inside of the component, we’re using the nav and list group components as well:

Figure 1.3 – The card component using the default Bootstrap 5 styles

Figure 1.4 – The card component using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

• Changed the global settings for the primary color, base font size, headings, and font weight
• Changed the color, background color, font size, padding, margin, border width, and border radius for the card component
• Changed the padding for the nav component
• Changed the color, background color, and padding for the list group component

Forum

The following is the second example, which is a common forum UI taken from an online forum template. It’s created with the use of tables and various Bootstrap 5 components, including buttons, a breadcrumb, badges, dropdowns, and pagination.

Figure 1.5 – A forum UI using the default Bootstrap 5 styles

Figure 1.6 – A forum UI using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

• Changed global settings for primary, info, and body background colors
• Removed the underline from links
• Removed all border radiuses
• Changed the background color of input elements
• Changed the color, padding, and borders of tables
• Changed the horizontal padding for buttons
• Changed the horizontal padding for paginations
• Changed the padding for and added text-transform to badges

The contact page

The following is the third example, which is a contact page taken from a Small Business Website template. It features various Bootstrap 5 form elements, including input groups, text inputs, dropdowns, textarea, and buttons. It also uses the ratio helper class to embed a Google Maps map with the right aspect ratio.

Figure 1.7 – The contact page UI using the default Bootstrap 5 styles

Figure 1.8 – The contact page UI using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

• Changed global settings for primary and body text colors
• Removed the border radius on buttons, dropdowns, select elements, and input elements
• Changed the color for input group addons
• Changed the “4x3” ratio helper to “3x2”
• Changed the font weight and margin for headings

Portfolio

The following is the fourth and final example, which is a portfolio item page taken from a Portfolio template. It features a carousel, image thumbnails, and various kinds of typography.

Figure 1.9 – A portfolio item UI using the default Bootstrap 5 styles

Figure 1.10 – A portfolio item UI using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

• Changed global settings for primary and light colors
• Generated a darker variant of the primary color using a Bootstrap 5 color function
• Disabled the border radius on all elements using the global option
• Increased the container maximum width for the xxl breakpoint
• Decreased the grid gutter width
• Changed the colors of headings and muted text
• Changed the font size used for small text
• Changed the color and font size of the navbar
• Changed the indicators of the carousel
• Changed the image thumbnail borders
• Changed the color and font size of the figure caption

Further customizations in this book

The four preceding examples only showed the visual impact of different customizations and a brief description of the changes. In Chapter 3, Downloading and Exploring the Bootstrap 5 Sass Files, we will learn about the code needed to make similar changes. Later, in Part 2 of this book, we will create a fully customized example of a complete website project.