Tutorial Bootstrap Image Shapes

Assalamualaikum Wr.Wb

Pada postingan sebelumnya sudah saya bahas sedikit tentang pengertian bootstrap dan kali ini saya akan berbagi sedikit tutorial tentang Image Shapes,seperti apa itu? lansung saja kita mulai.oh ya sebelumnya bagi yang belum punya bootstrap silakan download dulu di getbootstrap.com/.

• Rounded Cornes

Massukan tag wajib bootstrap di bawah ini
 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Berikut tag HTML nya
 

<div class="container">
  <h2>Rounded Corners</h2>
  <p>Contoh Rounded Corners</p>           
  <img src="123.JPEG" class="img-rounded" alt="123" width="304" height="236">
</div>

 Untuk lebih jelasnya lihat ss coding di bawah

Dan inilah hasilnya

• Circle

 Massukan tag wajib bootstrap di bawah ini
 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Masukkan tag HTML nya

<div class="container">
  <h2>Circle</h2>
  <p>Contoh Image Circle</p>           
  <img src="123.JPEG" class="img-circle" alt="123" width="304" height="236">
</div>

SS Coding

SS Hasilnya

• Thumnail

Massukan tag wajib bootstrap di bawah ini
 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Masukkan tag HTML nya

<div class="container">
  <h2>Thumbnail</h2>
  <p>Contoh Image Thumbnail</p>           
  <img src="123.JPEG" class="img-thumbnail" alt="123" width="304" height="236">
</div>

SS coding

   

SS Hasilnya

Mudah bukan untuk membuat shapes pada gambar ? Namun kamu harus download bootstrap dan  saya sarankan gambar serta file html nya  di simpan pada folder bootstrap supaya mudah dan tidak ribet serta semua style akan berfungsi dengan baik.Oke sekian dulu postingan kali ini semoga bermanfaat,Sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb