Bootstrap/Bootstrap_col.html at main · SinghLokesh02/Bootstrap · 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boostrap</title>
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
    crossorigin="anonymous"
  />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

  <style>
    .color{
        border: 2px solid cyan;
    }
    .width{
        height: 20px;
    }
    li{
        list-style: none;
        margin: 10px;
    }
    .ul{
        display: flex;
        height: 100%;
        align-items: center;

    }
  </style>
</head>
<body>

    <h1 class="text-center text-danger my-3">Bootstrap Column Property</h1>

    <div class="container">
        <div class="row">
            <div class="col bg-danger p-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim optio blanditiis labore modi commodi! Rerum dolor obcaecati eius veniam quae nostrum, dolorem ab nam incidunt quas voluptates iusto eum pariatur necessitatibus qui accusantium repellat perferendis doloremque voluptatibus eaque sequi voluptatem!</p>
            </div>
            <div class="col bg-success p-2">
                <p>Nobis accusamus laboriosam dolores a non sint odio fuga numquam explicabo. Pariatur amet necessitatibus labore, animi reiciendis ducimus dolores a vero blanditiis minus odit, et, non incidunt eos officia quae quis. Neque nam assumenda, in iste sed iure ea unde.</p>
            </div>
            <div class="col bg-primary">
                <p>Ipsa, voluptas corrupti iusto corporis laborum provident ut, ea numquam voluptates, necessitatibus consectetur? Omnis, modi quisquam. Ut ipsum eum, sint totam eveniet cumque iste vitae illo tempore. Ea rem rerum animi vel maiores pariatur, possimus quae. Praesentium nostrum molestias nam.</p>
            </div>
        </div>

        <!-- Navbar -->
        <div class="row my-5 width">
            <div class="col-md bg-danger">
                <ul class="ul ">
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Service</li>
                    <li>Contact</li>
                    <li>Schedule</li>
                </ul>
            </div>
            <div class="col bg-primary"></div>
        </div>

        <div class="row">
            <div class="row col bg-danger d-flex">
                <div class="col-md">Home</div>
                <div class="col-md">About</div>
                <div class="col-md">Contact</div>
                <div class="col-md">Service</div>
                <div class="col-md">Last</div>
            </div>
            <div class=" row col bg-warning"></div>
        </div>
    </div>
</div>


<!-- Container 2 -->
<div class="container my-3 border border-success">
    <div class="row">
        <div class="col border"><span>col-1</span></div>
        <div class="col border"><span>col-2</span></div>
        <div class="w-100"></div>
        <div class="col border"><span>col-3</span></div>
        <div class="col border"><span>col-4</span></div>
        <div class="col border"><span>col-5</span></div>
        <div class="w-100"></div>
        <div class="col border"><span>col-6</span></div>
        <div class="col border"><span>col-7</span></div>
    </div>
    <div class="row border">Row 2</div>
    <div class="row border"> Row 3</div>
</div>


<!-- Container 3 -->
<div class="container my-5 border border-dark">
    <div class="row">
        <div class="col border border-danger">Col 1</div>
        <div class="col border border-danger">Col 2</div>
        <div class="col border border-danger">Col 3</div>
        <div class="col border border-danger">Col 4</div>
        <div class="col border border-danger">Col 5</div>
        <div class="col border border-danger">Col 6</div>
        <div class="col border border-danger">Col 7</div>
        <div class="col border border-danger">Col 8</div>
    </div>
    <div class=" row border border-info ">Row 1</div>
    <div class="row border border-primary">row 2</div>
</div>

<div class="container my-5 bg-danger">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste voluptatum rerum, eligendi tenetur dolor qui sunt explicabo impedit, vero fugit reprehenderit optio vel consequuntur placeat repellendus deserunt accusantium repellat aut quisquam dignissimos. Dolorem voluptates illum voluptatum aperiam rem, vitae libero excepturi quod, deleniti maiores totam eum pariatur cumque sapiente adipisci.</p>
</div>
</body>
</html>