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

<!doctype html>
<html lang="en">

<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <title>MovieProject</title>

    <style>
        .poster {
            cursor: pointer;
            max-height: 20em;
        }

        @media only screen and (max-width: 640px) {

            .poster {
                max-height: 12em;
            }
        }

        .row-posters::-webkit-scrollbar {
            display: none;
        }

        .bg-dark {
            background-color: black !important;
        }

        .bg-secondary {
            background-color: #212121 !important;
        }

        input:focus {
            outline: none;

        }

        .slider-img {
            max-height: 28em;
            object-fit: cover;
        }

        .carousel-position {
            top: 15%;
            right: 50%;
        }
    </style>

</head>

<body class="bg-dark text-white min-vh-100">
    
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"> <img src="/udata/WalRZjo7E4E/logo.png" width="100px"> </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Movies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Series</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Genre
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark bg-dark"
                            aria-labelledby="navbarDarkDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Comedy</a></li>
                            <li><a class="dropdown-item" href="#">Romance</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="d-flex border border-2 border-white rounded px-2">
                    <input class="bg-transparent text-white border-0" placeholder="Search" aria-label="Search">
                    <i class="bi bi-search fs-5"></i>
                </form>
            </div>
        </div>
    </nav>

    
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/udata/wL07e0W02vB/hero-image-1.png" class="d-block w-100 slider-img" alt="...">
                <div class="carousel-caption d-none d-md-block carousel-position text-start">
                    <h1>First slide label</h1>
                    <p>Some representative placeholder content for the first slide. Lorem ipsum dolor sit, amet
                        consectetur adipisicing elit. Sed, dolor?</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/udata/wLq52XD2VVJ/hero-image-2.png" class="d-block w-100 slider-img" alt="...">
                <div class="carousel-caption d-none d-md-block carousel-position text-start">
                    <h1>Second slide label</h1>
                    <p>Some representative placeholder content for the first slide. Lorem ipsum dolor sit, amet
                        consectetur adipisicing elit. Sed, dolor?</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/udata/kgmk66nmZ9n/hero-image-3.png" class="d-block w-100 slider-img" alt="...">
                <div class="carousel-caption d-none d-md-block carousel-position text-start">
                    <h1>Third slide label</h1>
                    <p>Some representative placeholder content for the first slide. Lorem ipsum dolor sit, amet
                        consectetur adipisicing elit. Sed, dolor?</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>


    
    <section class="container-fluid">
        <div class="pb-5">
            <h2>Movies</h2>
            <div class="row-posters gap-3 d-flex overflow-auto">
                <img class="poster" src="/udata/1ke2zk7604B/Movie_series-3.png" />
                <img class="poster" src="/udata/z0Le7GGW7gr/Movie_series-4.png" />
                <img class="poster" src="/udata/Waldk811gyQ/Movie_series-5.png" />
                <img class="poster" src="/udata/wjXyB71y2zr/Movie_series-1.png" />
                <img class="poster" src="/udata/GXv9ZLOvym9/Movie_series-2.png" />
                <img class="poster" src="/udata/1ke2zk7604B/Movie_series-3.png" />
                <img class="poster" src="/udata/wjXyB71y2zr/Movie_series-1.png" />
                <img class="poster" src="/udata/GXv9ZLOvym9/Movie_series-2.png" />
            </div>
        </div>
        <div class="pb-5">
            <h2>TV Shows</h2>
            <div class="row-posters gap-3 d-flex overflow-auto">
                <img class="poster" src="/udata/wjXyB71y2zr/Movie_series-1.png" />
                <img class="poster" src="/udata/GXv9ZLOvym9/Movie_series-2.png" />
                <img class="poster" src="/udata/1ke2zk7604B/Movie_series-3.png" />
                <img class="poster" src="/udata/z0Le7GGW7gr/Movie_series-4.png" />
                <img class="poster" src="/udata/Waldk811gyQ/Movie_series-5.png" />
                <img class="poster" src="/udata/wjXyB71y2zr/Movie_series-1.png" />
                <img class="poster" src="/udata/GXv9ZLOvym9/Movie_series-2.png" />
                <img class="poster" src="/udata/1ke2zk7604B/Movie_series-3.png" />
            </div>
        </div>
    </section>


    
    <footer class="d-flex flex-column flex-sm-row p-2 p-sm-5 bg-secondary">
        <div>
            © MovieProject. All Rights Reserved.
            <br> <br>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo, accusantium
            numquam a, ex ad eveniet, quasi dolorem
            optio illo facilis quidem?
            Nostrum reprehenderit, quis nobis odio
            voluptatem deserunt libero repellat.
        </div>
        <div class="text-center p-2 pt-3 w-100">
            <h4> Connect with us </h4>
            <a href="#" class="text-white"><i class="bi bi-twitter fs-2 pe-2"></i></a>
            <a href="#" class="text-white"><i class="bi bi-facebook fs-2"></i></a>
        </div>
    </footer>

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

</body>

</html>

codemirror

Build the layout for a movie streaming website.

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

Layout of the Movie Streaming Website

Website