Learn Bootstrap 5 to create stunning, responsive web designs with layouts,  utilities, forms, components, and icons.

Become a Full Stack Developer

Bootstrap is an open-source CSS framework that simplifies the process of creating responsive web designs. By mastering Bootstrap 5, developers can efficiently build visually stunning and mobile-friendly websites, giving them a competitive edge in the job market.

This module explores the essentials of Bootstrap 5, such as its grid system, typography, and responsive web design principles, alongside advanced topics like Bootstrap layouts, utilities, and components. You’ll also dive into Bootstrap forms, icons, and built-in JavaScript plug-ins to create interactive features. Real-world projects, including registration forms and health tracker websites, will showcase your ability to apply these skills effectively.

By the end of this module, you’ll gain the expertise to design and develop modern, responsive websites using Bootstrap 5, including five portfolio-worthy projects. This will position you as a proficient front-end developer and help you advance in your web development career.

Learn Bootstrap

Which class should we add to our HTML element to prevent users from selecting text?

Which class should we add to our HTML element to prevent users from selecting text?

What is the most popular video format?

It sets the width of the image to the width of the parent at all times.

It increases the image width up to its maximum resolution until the parent width becomes greater than the original image width.

It increases the image width up to its maximum resolution until the parent width becomes smaller than the original image width.

It blurs the image to look something like a fluid.

What's the use of the `.image-fluid` class?

What’s the use of the <code>.image-fluid</code> class?

**(Select all that apply.)** Which elements within a table can be highlighted/made active using only one class?

(Select all that apply.) Which elements within a table can be highlighted/made active using only one class?

```html
<ul class="list-inline">
 <li class="list-inline-item">list item-1</li>
 <li class="list-inline-item">list item-2</li>
 <li class="list-inline-item">list item-3</li>
</ul>
```

```html
<ul class="text-unlstyled">
 <li class="display-inline">list item-1</li>
 <li class="display-inline">list item-2</li>
 <li class="display-inline">list item-3</li>
</ul>
```

```html
<ul class="list-unstyled">
 <li class="list-item">list item-1</li>
 <li class="list-item">list item-2</li>
 <li class="list-item">list item-3</li>
</ul>
```

```html
<ul class="inline">
 <li class="inline-item">list item-1</li>
 <li class="inline-item">list item-2</li>
 <li class="inline-item">list item-3</li>
</ul>
```

If we want to implement a navbar using an unordered list, which class would be best for this purpose?


If we want to implement a navbar using an unordered list, which class would be best for this purpose?

Test your understanding of the concepts covered in this chapter.

Introduction to Bootstrap

Layouts in Bootstrap 5

Utlities

Content

Forms

Components

Customization & Icons

Building a Registration Form

Building a Health Tracker Website

Conclusion

Quiz: Content