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

**(True or False)** We can include the `.btn` class in HTML elements other than `<button>`.

<p><strong>(True or False)</strong> We can include the <code>.btn</code> class in HTML elements other than <code>&lt;button&gt;</code>.</p>


Which class will we use to implement button groups?

<p>Which class will we use to implement button groups?</p>


Hiding the content in the `.accordion-collapse`

Displaying the content in the `.accordion-collapse`

What is the `.show` class responsible for when working with accordions? 

<p>What is the <code>.show</code> class responsible for when working with accordions?</p>


Which attribute is used to implement a tooltip in HTML elements?

<p>Which attribute is used to implement a tooltip in HTML elements?</p>


How do we set a time of 4 seconds for each slide in a carousel?

<p>How do we set a time of 4 seconds for each slide in a carousel?</p>


It is used to link the HTML files present in a website.

It displays a lot of hidden details present in the section of the web page.

It displays in front of the website and deactivates all other content on the page.

Which of the attributes is used to implement scrollspy?

<p>Which of the attributes is used to implement scrollspy?</p>


```html
<ul class="pagination justify-content-center mt-5">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
```


```html
<ul class="pagination justify-content-center mt-5">
    <li class="p-item"><a class="p-link" href="#">Previous</a></li>
    <li class="p-item"><a class="p-link" href="#">1</a></li>
    <li class="p-item"><a class="p-link" href="#">2</a></li>
    <li class="p-item"><a class="p-link" href="#">3</a></li>
    <li class="p-item"><a class="p-link" href="#">Next</a></li>
</ul>
```

```html
<ul class="page justify-content-center mt-5">
    <li class="p-item"><a class="p-link" href="#">Previous</a></li>
    <li class="p-item"><a class="p-link" href="#">1</a></li>
    <li class="p-item"><a class="p-link" href="#">2</a></li>
    <li class="p-item"><a class="p-link" href="#">3</a></li>
    <li class="p-item"><a class="p-link" href="#">Next</a></li>
</ul>
```

```html
<ul class="page justify-content-center mt-5">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
```

<p>Which pagination syntax is correct?</p>


```html
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="25">25%</div>
</div>
```

```html
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%;">25%</div>
</div>
```

```html
<div class="progress">
    <div class="progress" role="progressbar" width="25">25%</div>
</div>
```

```html
<div class="progress">
    <div class="progress" role="progressbar" style="width: 25%;">25%</div>
</div>
```

What is the correct way to implement a progress bar with 25% progress?

<p>What is the correct way to implement a progress bar with 25% progress?</p>


What are the three components of a Bootstrap card?

<p>What are the three components of a Bootstrap card?</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: Components