Bootstrap 4 - 03.1: Content

Tutorial dasar bootstrap 4 bagian 3 ini akan membahas penggunaan Content pada bootstrap 4 beserta contohnya. Oke mari kita mulai saja ke pembahasan nya 

Dalam pembahasan tentang content ini Rumah Code tidak akan membahas dengan terlalu detail. Rumah code hanya akan meberi contoh bagian dari content yang sering di gunakan saja. Berikut ini class content bootstrap yang sering digunakan:

1. Class pada Image
   1. img-fluid : Class ini berikan efek tampilan gambar dengan lebar menjadi 100%

      <img src="gambar.jpg" class="img-fluid" alt="Rumah Code">​

   2. img-thumbnail : class ini memberikan efek border pada gambar dengan ketebalan 1px

      <img src="gambar.jpg" alt="contoh img-thumbnail" class="img-thumbnail">​

   3. rounded : memberikan efek gambar tidak akan berbentuk kotak tapi class ini membuat sudut pada kotak gambar menjadi melengkung

      <img src="..." class="rounded float-left" alt="...">
      <img src="..." class="rounded float-right" alt="...">​

   4. Float : memberikan efek tata letak gambar ada di kiri atau kanan
2. Tabel class table ini memberikan efek pada tag html table

   <table class="table">
     <thead>
       <tr>
         <th scope="col">No</th>
         <th scope="col">Nama</th>
         <th scope="col">Alamat</th>
         <th scope="col">Website</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Rumah Code 1</td>
         <td>Alamat 1</td>
         <td>https://www.rumahcode.org</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Light</td>
         <td>Alamat 2</td>
         <td>http://www.light1001.com/</td>
       </tr>
     </tbody>
   </table>​

   Contoh kode di atas akan menampilkan tabel bootstrap biasa dengan warna yang terang kamu bisa menambagah class tambahan table-dark untuk menampilkan tabel yang berwarna gelap

   <table class="table table-dark">
     <thead>
       <tr>
         <th scope="col">No</th>
         <th scope="col">Nama</th>
         <th scope="col">Alamat</th>
         <th scope="col">Website</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Rumah Code 1</td>
         <td>Alamat 1</td>
         <td>https://www.rumahcode.org</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Light</td>
         <td>Alamat 2</td>
         <td>http://www.light1001.com/</td>
       </tr>
     </tbody>
   </table>

   class table-dark juga bisa di masukan kedalam tag thead untuk memberi efek pada judul tabel. Untuk membuat tabel yang warna baris nya belang belang maka kamu dapat menggunakan class table-striped.

   <table class="table table-striped">
     <thead>
       <tr>
         <th scope="col">No</th>
         <th scope="col">Nama</th>
         <th scope="col">Alamat</th>
         <th scope="col">Website</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Rumah Code 1</td>
         <td>Alamat 1</td>
         <td>https://www.rumahcode.org</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Light</td>
         <td>Alamat 2</td>
         <td>http://www.light1001.com/</td>
       </tr>
     </tbody>
   </table>

   Nah gimana jadinya kalo class table-striped dan table-dark di gabung? Silahkan kamu coba sendiri ^_^. Sedangkan untuk memberi efek tabel yang bergaris kamu dapat menggunakan class table-bordered. Jika kamu menginginkan tampilan tabel yang ketika kamu letakan pointer mouse di atas warna nya berubah kamu bisa menggunakan class table-hover.

   <table class="table table-bordered table-hover">
     <thead>
       <tr>
         <th scope="col">No</th>
         <th scope="col">Nama</th>
         <th scope="col">Alamat</th>
         <th scope="col">Website</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Rumah Code 1</td>
         <td>Alamat 1</td>
         <td>https://www.rumahcode.org</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Light</td>
         <td>Alamat 2</td>
         <td>http://www.light1001.com/</td>
       </tr>
     </tbody>
   </table>

3. Figures : class figure memberikan efek untuk  menampilkan gambar dengan text di bawah nya.

   <figure class="figure">
     <img src="gambar.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
     <figcaption class="figure-caption">Contoh menampilkan text di bawah gambar default nya di sebelah kanan.</figcaption>
   </figure>
   
   
   <figure class="figure">
     <img src="gambar.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
     <figcaption class="figure-caption text-right">Contoh menampilkan text di kanan.</figcaption>
   </figure>​

Nah itulah beberapa class dalam bootstrap content. Juka masih bingun kamu dapat mengunjungi website nya bootstrap langsung.