Bootstrap 4 - 02.3: Layout pada Bootstrap 4

Tutorial dasar bootstrap 4 bagian 2.3 ini akan membahas penggunaan layout Media Object pada bootstrap4. Ok mari kita mulai mempelajari Layout Media Object pada bootstrap. Media Object adalah komponen bootstrap yang di buat untuk membanguan komponen kompleks dan berulang di mana beberapa media di letakan bersamaan dengan konten.

untuk menggunakan media Object ini cukup dengan menggunakan class media dan class media-body. Berikut ini contoh kode html dan css nya :

• Html

  <div class="media satu">
    <img class="mr-3" alt="Belajar botstrap di RumahCode.Org" style="width: 60px; height: 60px;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" data-holder-rendered="true">
    <div class="media-body">
      <h5 class="mt-0">Belajar Bootstrap "Menampilkan gambar di atas"</h5>
      <p>Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux</p>
    </div>
  </div>
  
  
  <div class="media dua">
    <img class="align-self-center mr-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="Media di tengah">
    <div class="media-body">
      <h5 class="mt-0">Belajar Bootstrap "Menampilkan gambar di tengah"</h5>
      <p>Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux</p><p>Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux</p>
    </div>
  </div>
  
  <div class="media tiga">
    <img class="align-self-end mr-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="Media di bawah">
    <div class="media-body">
      <h5 class="mt-0">Tutorial Bootstrap "Menampilkan gambar di bawah"</h5>
      <p>Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux</p><p>Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux</p>
    </div>
  </div>
  <br>
  <ul class="list-unstyled satu">
    <li class="media">
      <img class="mr-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="List Media Object @ rumahcode.org">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List Media Object @ rumahcode.org</h5>
        Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux
      </div>
    </li>
    <li class="media my-4">
      <img class="mr-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="List Media Object @ rumahcode.org">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List Media Object @ rumahcode.org</h5>
        Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux
      </div>
    </li>
    <li class="media">
      <img class="mr-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="List Media Object @ rumahcode.org">
      <div class="media-body">
        <h5 class="mt-0 mb-1">Hallo kawan kawan</h5> kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux
      </div>
    </li>
  </ul>
  <br>
  <div class="media satu">
    <img class="mr-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0">Reply Comment</h5>
      Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux
  
      <div class="media mt-3 dua">
        <a class="pr-3" href="#">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' rx='20' ry='20' width='58' height='58' style='fill:navy;stroke:black;stroke-width:1;opacity:0.5' /%3E%3Ctext x='6' y='25' style='font-weight: bold;' fill='lightblue'%3ERumah%3C/text%3E%3Ctext x='12' y='43' style='font-weight: bold;' fill='lightblue'%3ECode%3C/text%3E%3C/svg%3E" alt="Generic placeholder image">
        </a>
        <div class="media-body">
          <h5 class="mt-0">Reply Comment</h5>
          Hallo kawan kawan mari kita belajar Bootstrap 4 bersama rumahcode.org. Di rumahcode.org itu banyak berisi tutorial tutorial yang menarik loh. Tempatnya Belajar Bahasa Pemograman & Linux
        </div>
      </div>
    </div>
  </div>​

• CSS

  .satu{
    background-color: coral;
  }
  .dua{
    background-color: lightblue;
  }
  .tiga{
    background-color: yellow;
  }​

Agar Lebih jelas dalam mempelajari media Body ini saya sediakan source code nya di codepen.