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
xxlbreakpoint - 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.
