bootstrap-media-object/nesting.html at main · mdbootstrap/bootstrap-media-object · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Material Design for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
  <!-- MDB -->
  <link rel="stylesheet" href="css/bootstrap-media-object.min.css" />
</head>

<body>
  <!-- Start your project here-->
  <!-- Media object -->
    <div class="d-flex">
      <!-- Image -->
      <img
        src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
        alt="John Doe"
        class="me-3 rounded-circle"
        style="width: 60px; height: 60px;"
      />
      <!-- Media body -->
      <div>
        <h5 class="fw-bold">
          John Doe
          <small class="text-muted">Posted on February 19, 2021</small>
        </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua.
        </p>
        <!-- Nested Media object -->
        <div class="d-flex mt-4">
          <img
            src="https://mdbcdn.b-cdn.net/img/new/avatars/4.webp"
            alt="Anna Doe"
            class="me-3 rounded-circle"
            style="width: 60px; height: 60px;"
          />
          <div>
            <h5 class="fw-bold">
              Anna Doe
              <small class="text-muted">Posted on February 19, 2021</small>
            </h5>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet,
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.
            </p>
          </div>
        </div>
        <!-- Nested Media object -->
      </div>
      <!-- Media body -->
    </div>
  <!-- Media object -->
  <!-- End your project here-->

  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript"></script>
</body>

</html>