bootstrap-tutorial/index2.html at main · DevGoyalG/bootstrap-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Grid System</h2>
        <div class="row">
            <div class="col-xl-4 bg-success">one</div>
            <div class="col-xl-8 bg-danger">two</div>
        </div>
        <br>

        <div class="row">
            <div class="col-2 md-2 bg-success">one</div>
            <div class="col-8 md-8 bg-danger">two</div>
            <div class="col-2 md-2 bg-success">three</div>
        </div>
        <br>

        <div class="row align-items-center">
            <div class="col bg-success">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit nemo quia neque accusamus at. Iste quibusdam rerum cupiditate odio provident. Sunt maxime voluptatum similique consequuntur beatae, amet nostrum natus animi.</div>
            <div class="col  bg-warning">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem numquam molestias tempora ducimus quasi, accusamus nostrum veniam similique sit? Explicabo sunt tempora, nobis ipsum consectetur nulla harum libero cupiditate tempore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt illo rem nesciunt assumenda harum. Porro, id fugiat similique ad eveniet quia tempore possimus, provident dolorum ratione optio officia adipisci quasi.</div>
            <div class="col  bg-success">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt error fugit explicabo beatae, amet nisi ullam necessitatibus repudiandae temporibus sed excepturi asperiores nam expedita pariatur, facilis distinctio! Sit, nobis nam!</div>
            <div class="col  bg-danger align-self-start">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt error fugit explicabo beatae, amet nisi ullam necessitatibus repudiandae temporibus sed excepturi asperiores nam expedita pariatur, facilis distinctio! Sit, nobis nam!</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>