BOOTSTRAP

BOOTSTRAP

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap Example</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

   

</head>

<body>

    <h1>Hello, Bootstrap!</h1>

    <h1 class="text-primary">Primary Heading</h1>

<h1 class="text-success">Success Heading</h1>

<h1 class="text-danger">Danger Heading</h1>

<h1 class="display-1">Display 1</h1>

<h1 class="display-1">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-6">Display 6</h1>

<h1 class="text-center text-warning">Centered Heading</h1>

<h1 class="text-white bg-dark p-3">Styled Heading</h1>

<h1 class="text-uppercase">Uppercase Heading</h1>

<h1 class="text-lowercase">Lowercase Heading</h1>

<div class="container mt-4">

    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">

        <!-- Indicators -->

        <div class="carousel-indicators">

            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>

            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>

            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>

        </div>

        <!-- Slideshow Items -->

        <div class="carousel-inner">

            <div class="carousel-item active">

                <img src="legend.PNG" class="d-block w-100" alt="Slide 1">

                <div class="carousel-caption">

                    <h5>First Slide</h5>

                    <p>Some description for the first slide.</p>

                </div>

            </div>

            <div class="carousel-item">

                <img src="scatter.PNG" class="d-block w-100" alt="Slide 2">

                <div class="carousel-caption">

                    <h5>Second Slide</h5>

                    <p>Some description for the second slide.</p>

                </div>

            </div>

            <div class="carousel-item">

                <img src="ml model.png" class="d-block w-100" alt="Slide 3">

                <div class="carousel-caption">

                    <h5>Third Slide</h5>

                    <p>Some description for the third slide.</p>

                </div>

            </div>

        </div>

        <!-- Left and Right Controls -->

        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">

            <span class="carousel-control-prev-icon"></span>

        </button>

        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">

            <span class="carousel-control-next-icon"></span>

        </button>

    </div>

</div>

<!-- Bootstrap JS (Required for Carousel to Work) -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

GIT HUB projects

 

SCAN this QR code to connect with git hub projects