Practice-2.3/bs5practice.html at main · FaronAan/Practice-2.3 · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <!--<div class="container-sm p-5 bg-primary">
            <h1>Non-fluid container</h1>
            <p>This container isn't fluid</p>
        </div>
        <div class="container-fluid p-5 bg-dark text-white">
            <h1>Fluid container</h1>
            <p>But this one is.</p>
        </div>
        <div class="row">
            <div class="col bg-primary text-white">First column</div>
            <div class="col bg-dark text-white">Second column</div>
            <div class="col-sm-3 bg-primary text-dark">This one is responsive!</div>
        </div>
        <div class="container mt-3">
            <h1 class="display-1">Display Level 1</h1>
            <h1 class="display-2">Display Level 2</h1>
            <h1 class="display-3">Display level 3</h1>
            <h1 class="display-4">Display Level 4</h1>
        </div>
        <div class="container mt-3">
            <p><abbr title="Rose-Hulman Institute of Technology">RHIT</abbr> was founded a long time ago</p>
        </div>
        <div class="container mt-3">
            <h1>Blockquotes</h1>
            <p>The blockquote element is used to present content from another source:</p>
            <blockquote class="blockquote">
              <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
              <footer class="blockquote-footer">From WWF's website</footer>
            </blockquote>
        </div>
        <div class="container mt-3">
            <dl>
              <dt>Coffee</dt>
              <dd>- fermented beans</dd>
              <dt>Tea</dt>
              <dd>- fermented leaves</dd>
            </dl>
        </div>
        <div class="container mt-3">

            <p><code>span</code> and <code>div</code> are not semantic.</p>
        </div>
        <div class="container mt-3">
            <pre>
            This text is in a pre element
            is displayed in a fixed-width
            font, and it preserves
            both      spaces and
            line breaks.
            </pre>
        </div>
        <div class="container mt-3">
            <p class="text-black-70 text-bg-primary p-3">This text is black with 70% opacity and primary bg.</p>
        </div>
        <div class="container mt-3">

            <p>This is a contextual table that is bordered and striped</p>
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr class="table-primary">
                  <td>Aaron</td>
                  <td>Fan</td>
                  <td>fana@rose-hulman.edu</td>
                </tr>
                <tr>
                  <td>Olga</td>
                  <td>Scrivner</td>
                  <td>Use Piazza instead</td>
                </tr>
              </tbody>
            </table>
          </div>-->
          <img src="woe" class="rounded-circle" alt="circular woe">
    </body>
</html>