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

Section 1: `.col-2` <br>
Section 2: `.col-2`

Section 1: `.col-5`<br>
Section 2: `.col-5`

Section 1: `.col-6`<br>
Section 2: `.col-6`

Section 1: `.col-12`<br>
Section 2: `.col-12`

How can we segregate two sections into two equal portions column-wise using Bootstrap classes having parent class `.row`?

<p>How can we segregate two sections into two equal portions column-wise using Bootstrap classes having parent class <code>.row</code>?</p>


Which Bootstrap class can we use to reduce the opacity of the background of an element to 25%?

<p>Which Bootstrap class can we use to reduce the opacity of the background of an element to 25%?</p>


What do we use to create different layouts for devices of different screens?

<p>What do we use to create different layouts for devices of different screens?</p>


Section 1: `.col-6` `.col-12` <br>
Section 2: `.col-6` `.col-12` <br>
Section 3: `.col-6` `.col-12`

Section 1: `.col-12` `.col-md-4` <br>
Section 2: `.col-12` `.col-md-4`<br>
Section 3: `.col-12` `.col-md-4`

Section 1: `.col-12` `.col-md-6` <br>
Section 2: `.col-12` `.col-md-6`<br>
Section 3: `.col-12` `.col-md-6`

Section 1: `.col-6` <br>
Section 2: `.col-6`<br>
Section 3: `.col-6`

How can we structure a layout using Bootstrap so that we have three sections under a `.row` class having equal width in devices with a width equal to or greater than `md`? Otherwise, each section's width extends to the full width of the parent. 

<p>How can we structure a layout using Bootstrap so that we have three sections under a <code>.row</code> class having equal width in devices with a width equal to or greater than <code>md</code>? Otherwise, each section’s width extends to the full width of the parent.</p>


```html
<div class="progress">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

```html
<div class="progress">
    <div class="progress-bar text-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

```html
<div class="progress bg-warning">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

```html
<div class="progress progress-warning">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

Which of the code snippets will create a yellow progress bar?

<p>Which of the code snippets will create a yellow progress bar?</p>


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: Health Tracker Website