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

<!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">

    <title>Health Tracker</title>
</head>

<body>

    <div class="container pt-5">
        <h2 class="text-center">Health Tracker</h2>
        <h5 class="text-secondary text-center pb-3">Track your health and fitness</h5>
        <div class="row">
            <div class="col-6 pt-5">
                
                <label>Mon</label>
                <div class="progress mb-2">
                    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Monday"></div>
                </div>
                <label>Tue</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Tuesday"></div>
                </div>
                <label>Wed</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Wednesday"></div>
                </div>
                <label>Thurs</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Thursday"></div>
                </div>
                <label>Fri</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Friday"></div>
                </div>
                <label>Sat</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: 95%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Saturday"></div>
                </div>
                <label>Sun</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-dark" role="progressbar" style="width: 75%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Sunday"></div>
                </div>
            </div>

            
            <div class="col-6 text-center px-5">
                <h4 class="mb-3">Daily Tasks </h4>
                <div class="text-start ">

                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks" checked>
                        <span class="ps-3"> 20 pushups </span>
                    </div>
                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks">
                        <span class="ps-3">5 km walk</span>
                    </div>
                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks">
                        <span class="ps-3">20 situps</span>
                    </div>
                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks">
                        <span class="ps-3">20 squats</span>
                    </div>
                </div>
            </div>
        </div>

        <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>
        <script src="index.js"></script>
</body>

</html>

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const progressMonday = document.getElementById('Monday');
const progressTuesday = document.getElementById('Tuesday');
const progressWednesday = document.getElementById('Wednesday');
const progressThursday = document.getElementById('Thursday');
const progressFriday = document.getElementById('Friday');
const progressSaturday = document.getElementById('Saturday');
const progressSunday = document.getElementById('Sunday');

// count the number of checkboxes that are checked

const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

const d = new Date();
let day = weekday[d.getDay()];

const len = checkboxes.length;

if (day == 'Monday')
    progressMonday.style.width = 0 + '%';
if (day == 'Tuesday')
    progressTuesday.style.width = 0 + '%';
if (day == 'Wednesday')
    progressWednesday.style.width = 0 + '%';
if (day == 'Thursday')
    progressThursday.style.width = 0 + '%';
if (day == 'Friday')
    progressFriday.style.width = 0 + '%';
if (day == 'Saturday')
    progressSaturday.style.width = 0 + '%';
if (day == 'Sunday')
    progressSunday.style.width = 0 + '%';

const countChecked = () => {
    let num = 0;

    checkboxes.forEach(checkbox => {
        if (checkbox.checked == true)
            num++;
    })

    let per = (num / len) * 100;
    if (day == 'Monday')
        progressMonday.style.width = per + '%';
    if (day == 'Tuesday')
        progressTuesday.style.width = per + '%';
    if (day == 'Wednesday')
        progressWednesday.style.width = per + '%';
    if (day == 'Thursday')
        progressThursday.style.width = per + '%';
    if (day == 'Friday')
        progressFriday.style.width = per + '%';
    if (day == 'Saturday')
        progressSaturday.style.width = per + '%';
    if (day == 'Sunday')
        progressSunday.style.width = per + '%';
}

countChecked()
checkboxes.forEach(checkbox => checkbox.addEventListener('click', countChecked));



codemirror

Learn how to make the health tracker website responsive.

Introduction to Bootstrap

Layouts in Bootstrap 5

Utlities

Content

Forms

Components

Customization & Icons

Building a Registration Form

Building a Health Tracker Website

Conclusion

Responsive Health Tracker Website

Layout