Explore Bootstrap 5 basics and advanced concepts while creating five real-world projects. Gain insights into building stunning, responsive websites and enhance your front-end development skills.

Learn Bootstrap 5 From Scratch With Projects.png

Bootstrap is an open-source CSS framework that allows developers to create responsive websites efficiently. Mastering Bootstrap 5 can enhance your skills and give you an advantage in the job market.

This course covers Bootstrap 5 basics, like the grid system, typography, and responsive design, and advanced topics, such as layouts, utilities, components, and custom CSS. You'll also learn to use Bootstrap's built-in JavaScript plug-ins and create five real-world projects, including a registration form, a profile card, a health tracker website, a movie streaming website, and a portfolio website. You'll be able to build stunning and responsive websites quickly and effortlessly using Bootstrap 5.

By completing this course, you'll have the knowledge and skills to create responsive and visually appealing websites with Bootstrap 5 and add five real-world projects to your portfolio. This knowledge will help you become a proficient front-end developer and advance your web development career.

Modern Web Design Using Bootstrap 5 with Hands-On Projects

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

Utilities

Content

Forms

Components

Customization & Icons

Building a Registration Form

Building a Profile Card

Building a Health Tracker Website

Building a Movie Streaming Website

Building a Portfolio Website

Conclusion

Quiz: Components