Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • The Missing Bootstrap 5 Guide
  • Toc
  • feedback
The Missing Bootstrap 5 Guide

The Missing Bootstrap 5 Guide

By : Jeppe Schaumburg Jensen
4.2 (13)
close
The Missing Bootstrap 5 Guide

The Missing Bootstrap 5 Guide

4.2 (13)
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
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

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “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.”

A block of code is set as follows:

// Required
@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/maps";
@import "../bootstrap/scss/mixins";
@import "../bootstrap/scss/root";

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

// 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("·");

Any command-line input or output is written as follows:

npm install bootstrap

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “The Page title global module is used on all pages except for the Home page and Product page.”

Tips or Important Notes

Appear like this.

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