Bootstrap 4 – Media Objects

Media object component cung cấp một cách đơn giản định dạng cho text cùng media object trên cùng một trang.

Hữu ích khi bạn cần trình bày hình một bên, text một bên chẳng hạn.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <img class="mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
      <div class="media-body">
        <h4>Media Heading</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>

    <div class="media">
      <img class="mr-3" src="https://editor.ecntt.com/img/samples/11s.jpg" alt="Sample photo">
      <div class="media-body">
        <h4>Media Heading</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>

Cách dùng

Để sử dụng media object component bạn cần thêm class bên ngoài text và media cũng như các class bên trong chúng.

Class bao bên ngoài: Bao tất cả bằng element <div> với class .media

Media Object : Không cần thêm các class vào media object (<img>, <video>…).

Media Body : Bao tất cả text với class .media-body với element <div>. Sử dụng class .media-heading nếu muốn dùng heading.

Margins : Có thể áp dụng các class margin của Booststrap như mr-1, mr-2

Media Objects lồng vào nhau

Bạn có thể tạo các Media Objects lồng vào nhau.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <img class="mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
      <div class="media-body">
        <h4>Media Object</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

        <!-- Start Nested Media Object -->
        <div class="media">
          <img class="mr-3" src="https://editor.ecntt.com/img/samples/10s.jpg" alt="Sample photo">
          <div class="media-body">
            <h4>Nested Media Object</h4>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
              eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
          </div>
        </div>
        <!-- End Nested Media Object -->

      </div>
    </div>
  </div>

</body>

</html>

Horizontal Alignment

Bạn cũng có thể định dạng để media body media heading xuất hiện trước rồi mới tới media object.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <div class="media-body">
      <h4>Media Object</h4>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <img class="mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
      </div>
        
      <div class="media">
      <div class="media-body">
      <h4>Media Object</h4>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <img class="mr-3" src="https://editor.ecntt.com/img/samples/11s.jpg" alt="Sample photo">
      </div>
    </div>
  </div>

</body>

</html>

Vertical Alignment

Mặc định Media objects nằm ở vị trí top, bạn có thể canh chỉnh để nó nằm giữ hay dưới. Ví dụ để media objects nằm giữa bạn có thể dùng class d-flex align-self-center.

Middle

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <img class="d-flex align-self-center mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
      <div class="media-body">
        <h4>Media Object</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>

Bottom

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <img class="d-flex align-self-end mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
      <div class="media-body">
        <h4>Media Object</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>

2 Media Objects

Bạn có thể dùng nhiều hơn 1 media object.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <div>
        <img class="mr-2" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
        <img class="mr-3" src="https://editor.ecntt.com/img/samples/10s.jpg" alt="Sample photo">
      </div>
      <div class="media-body">
        <h4>Media Object</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>

  </div>

</body>

</html>

Left & Right Aligned

Bạn có thể sử dụng 2 media objects ở 2 bên và media body nằm ở giữa.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="media">
      <img class="mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Sample photo">
      <div class="media-body">
        <h4>Media Object</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <img class="ml-3" src="https://editor.ecntt.com/img/samples/10s.jpg" alt="Sample photo">
    </div>
  </div>

  </div>

</body>

</html>

Media Lists

Bạn có thể tạo Media Lists bằng cách sử dụng <ul> và <li>. Thường dùng trong trường hợp comment, article…

Dùng class .list-unstyled trong <ul> và .media trong <li>.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <ul class="list-unstyled">
      <li class="media">
        <img class="mr-3" src="https://editor.ecntt.com/img/samples/9s.jpg" alt="Photo of Pukeko in New Zealand">
        <div class="media-body">
          <h4>Media Object</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

          <!-- Start Nested Media Object -->
          <div class="media">
            <img class="mr-3" src="https://editor.ecntt.com/img/samples/10s.jpg" alt="Photo of bird in the Philippines">
            <div class="media-body">
              <h4>Nested Media Object</h4>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
                aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
          </div>
          <!-- End Nested Media Object -->

        </div>
      </li>
      <li class="media">
        <img class="mr-3" src="https://editor.ecntt.com/img/samples/11s.jpg" alt="Photo of sunset in Laos">
        <div class="media-body">
          <h4>Media Object</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </li>
    </ul>

  </div>

</body>

</html>