Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying The Missing Bootstrap 5 Guide
  • Table Of Contents Toc
  • Feedback & Rating feedback
The Missing Bootstrap 5 Guide

The Missing Bootstrap 5 Guide

By : Jeppe Schaumburg Jensen
4.3 (14)
close
close
The Missing Bootstrap 5 Guide

The Missing Bootstrap 5 Guide

4.3 (14)
By: Jeppe Schaumburg Jensen

Overview of this book

Bootstrap is one of the world's most popular and easy-to-use frontend UI toolkits for building responsive websites, but few know how to get the most out of its vast range of components, utilities, JavaScript plugins, and other features. The Missing Bootstrap 5 Guide will help you customize Bootstrap 5 with Sass to achieve a layout that stands out from the crowd, enabling you to create something unique that doesn't look like it was created with Bootstrap. With this practical guide to Bootstrap customization, developers working with Bootstrap will be able to utilize powerful customization techniques to create websites with unique designs and exclusive features. You’ll see how you can develop a visually appealing website quickly and easily by taking a hands-on approach to customizing your website using advanced features of CSS, Sass, and JavaScript. Starting with learning how the Bootstrap 5 visual style is created with Sass, you’ll find out how to customize it to fit your needs while achieving the website look you want. You'll then use this knowledge to create a website using most of Bootstrap 5's components and customization with Sass and JavaScript. Finally, you’ll explore various advanced Bootstrap 5 topics related to Sass, CSS, JavaScript, and source code optimization. By the end of this book, you'll be able to design and build modern, captivating, and unique websites on your own using the immense capabilities of Bootstrap 5.
Table of Contents (17 chapters)
close
close
1
Part One – Customizing Bootstrap 5 with Sass
8
Part Two – Creating a Unique-Looking Website Based on Bootstrap 5 and Customization
12
Part Three – Advanced Topics Related to Bootstrap 5

How we can customize Bootstrap 5

Bootstrap 5 can be customized using three different methods:

  • Editing the compiled Bootstrap CSS directly
  • Overwriting the Bootstrap CSS with your own custom styles
  • Customizing the default styles using Sass

We will now see a short description of each of these methods.

What Is Sass?

Syntactically Awesome Style Sheets (Sass) is a preprocessor scripting language that is interpreted and compiled into Cascading Style Sheets (CSS). Sass extends the default capabilities of CSS with variables, nesting, partials, functions, and more. We will learn more about Sass in Chapter 2, Using and Compiling Sass.

Method 1 – editing the compiled Bootstrap CSS directly

It is possible to simply edit the compiled Bootstrap CSS directly to achieve the styles you want. This can be rather complex, depending on what you want to change, but most importantly, this will make it hard to update Bootstrap, since you will need to make all your changes again if you want to update to a newer version of it. This approach is not recommended.

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

You may choose to simply override the Bootstrap CSS with your own custom styles, but it will increase the size of the total CSS code and might take a lot of work if you want to change many aspects of the default styles. When updating to a newer version of Bootstrap 5, it is easier to maintain than the aforementioned first approach, but if new components or utilities are added to Bootstrap 5, these will have to be overridden manually according to your design needs. This approach might work for you if you simply need to change the color palette or – for some reason – cannot use a Sass compiler to work with the original source code of Bootstrap. For this book, though, we will learn how to customize Bootstrap 5 using Sass.

Method 3 – customizing the default styles using Sass

If you want maximum control and possibilities, you should customize Bootstrap using Sass. This requires a Sass compiler, some knowledge of the Sass language, and knowledge of the Bootstrap Sass files. All of this will be explained and demonstrated in the next two chapters.

Some of the advantages of using Sass are that you can change global settings, modify the used color palette and typography in only one place, and easily customize components. It is also a lot easier and quicker to work with, and on top of that, the compiled file size can be optimized to reflect the actual elements and features being used. For these reasons, this is the recommended approach to customize Bootstrap 5.

Now that we have looked at the various ways in which we can customize Bootstrap, let’s look at an example component, customized using each of the three different methods mentioned previously.

bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY