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

Using JavaScript methods

In the list at the beginning of this chapter, we saw that all interactive components have methods. In the official documentation of Bootstrap 5, you will find a table describing all of the available methods for each component. In this table, you will find the name and description for each method. You can access the components in the official documentation through this link: getbootstrap.com/docs/5.2/components.

Now, we will see some examples of how to use specific methods for the tooltip component. In our example page, we first have a default tooltip component for comparison. The HTML for this is as follows:

part-3/chapter-11/examples/methods/index.html line 15

<div class="badge bg-secondary" id="tooltipDefault" title="Default tooltip">Badge with default tooltip</div>

The tooltip has the id="tooltipDefault" attribute, which we use to initialize it with the following JavaScript:

part-3/chapter...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
The Missing Bootstrap 5 Guide
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

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

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon