bootstrap-tutorial/index.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
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
<!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>
    <nav class="navbar
    bg-primary
    navbar-expand-lg
   "
    data-bs-theme="dark">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">Brand Name</a>
            <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup"></div>
                <div class="navbar-nav">
                    <a class="nav-link" href="#">Home</a>
                    <a class="nav-link" href="#">Contact Us</a>
                    <a class="nav-link" href="#">About</a>
                </div>
            </div>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <div class="container-md">
        <h2>Bootstrap Demo</h2>

        <div class="card" style="width: 18rem;">
            <img src="man.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Rohit Sharma</h5>
              <p class="card-text">Captain of Indian Cricket Team in all formats.</p>
              <a href="#" class="btn btn-primary">Tap here to know more</a>
            </div>
          </div>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem accusamus repellat sequi qui ipsa veniam corrupti, nostrum fugiat eaque laudantium unde officiis voluptatum itaque pariatur natus saepe reprehenderit deserunt? Nam?
        Ratione accusamus cum minima maxime, nemo repudiandae voluptas natus repellendus repellat! Minima ea vero velit provident voluptate quae doloremque laudantium voluptatum quod reprehenderit similique, tempora illo rem suscipit porro amet!
        Alias amet officiis neque vero vitae, cumque explicabo sit nam ad ullam mollitia sint voluptatum quisquam possimus! Harum quas itaque suscipit quo, magni, rem expedita, aperiam dicta repudiandae sapiente ad.
        Consequatur esse ad placeat error culpa voluptas voluptates id maiores nihil eius voluptatibus recusandae enim sapiente cumque, asperiores, aliquam, deserunt repellendus atque voluptate. Quis quod rem, soluta commodi beatae odit!
        Maiores, aspernatur, modi facere molestias voluptatem illo vel dicta excepturi voluptatibus, culpa minus iusto odio quos pariatur fuga itaque animi at. Nemo perferendis et sequi magnam aspernatur voluptatum quae nam.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur maiores voluptas distinctio quo vero dolor in, soluta vitae qui facere tempore repellat earum beatae blanditiis impedit libero laborum harum eum.
    Aliquam dolorem harum perspiciatis porro facilis quia, quos consequuntur deleniti molestiae odit ut quas iusto ab cum praesentium voluptates laboriosam dolores quibusdam! Molestias sapiente recusandae maiores delectus, ipsa natus veritatis.
    Quos voluptatum assumenda pariatur quis nisi eos. Quod repudiandae facilis voluptas quibusdam facere mollitia a ullam vitae voluptatem ab. Cumque expedita dolore nobis culpa explicabo deserunt, doloremque nisi eum fugit.
    Ipsam a neque, inventore aspernatur nulla similique quod deleniti reiciendis expedita quia quidem obcaecati quae repudiandae voluptatibus cumque sunt sit aperiam, ex aut architecto voluptates, labore consequatur quisquam numquam! Nihil!
    Porro cum rerum doloremque dolor, assumenda explicabo debitis minima non ad autem voluptatibus asperiores doloribus iure odio error ipsa labore, suscipit at voluptatem, quis laboriosam consequatur accusantium? At, illum quos.</p>


        <button>Click Me</button>
        <button class="btn">Click Me</button>
        <button class="btn btn-danger">Click Me</button>
        <button class="btn btn-success">Click Me</button>
        <button class="btn btn-info">Click Me</button>
        <button class="btn btn-warning">Click Me</button>
        <br>
        <button>Click Me</button>
        <button class="btn">Click Me</button>
        <button class="btn btn-outline-danger">Click Me</button>
        <button class="btn btn-outline-success btn-lg">Click Me</button>
        <button class="btn btn-outline-info btn-sm">Click Me</button>
        <button class="btn btn-outline-warning" disabled>Click Me</button>

        <a href="#" class="btn btn-dark">google me!</a>

        <br>

        <span class="badge bg-secondary">New</span>
        <span class="badge bg-danger">10+</span>

        <h3>Notifications <span class="badge bg-primary">25+</span></h3>
        <br>
        <button class="btn btn-primary">
            Followers
            <span class="badge bg-danger">
                100+
                100+
            </span>
        </button>

        <div class="alert alert-danger">Download Failed! Please try again</div>
        <div class="alert alert-success alert-dismissible">
            You scored Rank 1
            <button class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <div class="container">
            <h1>Bootstrap Demo</h1>
            <div class="btn-group">
                <button class="btn btn-outline-primary">one</button>
                <button class="btn btn-outline-success">two</button>
                <button class="btn btn-outline-danger">three</button>
            </div>
            <button class="btn btn-success">one</button>
            <button class="btn btn-success">two</button>
            <button class="btn btn-success">three</button>
        </div>

    </div>


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