Cara Merubah Bentuk Lingkaran Pada Gambar dengan Bootstrap

Banyak yang mempertanyakan bagaimana cara merubah gambar yang tadinya berbentuk persegi panjang, maupun persegi menjadi lingkaran, hal ini sering jadi pertanyaan pada murid, sewaktu kita belajar HTML dan CSS untuk merubah gambar membutuhkan property CSS yaitu border radius, apakah teman-teman masih ingat, jika sudah lupa caranya nanti akan saya contohkan saat menggunakan HTML dan CSS saja dan menggunakan bootstrap, caranya cukup mudah ko teman-teman apa lagi menggunakan bootstrap, oke jangan kemana-mana cara merubah bentuk lingkaran pada gambar dengan bootstrap, akan kita bahas sesaat lagi.

Pada dasarnya ketika kita ingin merubah gambar menjadi lingkaran sebenarnya sudah cukup menggunakan HTML dan CSS saja, tapi kita harus tau juga bagaimana cara membuatnya dengan boostrap, apa lagi kita sudah menggunakan framework bootstrap, oke seperti janji saya pada paragraf pertama untuk belajar cara merubah bentuk lingkaran pada gambar dengan bootstrap, kita bahas terlebih dahulu menggunakan HTML dan CSS, oke langsung saja teman-teman lihat struktrunya:

DIsini saya mempunyai sebuah gambar facebook yang berbentuk persegi, object ini yang akan kita pakai sesaat lagi, jika teman-teman ingin sama bisa cari seperti ini atau gambar apa saja yang berbentuk persegi, supaya kita tau perbedaannya, oke langsung saja:

<!DOCTYPE html>
<html>
<head>
	<title><strong>cara merubah bentuk lingkaran pada gambar dengan bootstrap</strong></title>
	<-e-style type="text/css">
		img{
			border-radius: 50%; /*property ini yang membuat efek menjadi lingkaran*/
		}
	<-e-/style>
</head>
<body>
	<img src="facebook.png">
</body>
</html>

Sudah jadi menjadi lingkaran ya teman-teman, oke sekarang kita coba menggunakan bootstrap:

Teman-teman tinggal pilih bagian yang tengah ya teman-teman, dengan menggunakan class=”img-circle” kita sudah bisa membentuk lingkaran pada gambar facebook di atas, tinggal teman-teman cari saja gambarnya kasih class tersebut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <-e-script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"><-e-/script>
      <-e-script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><-e-/script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <span style="color: #ff0000"><img src="../facebook.png" class="img-circle"> <--ini ya teman-teman </span>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><-e-/script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <-e-script src="js/bootstrap.min.js"><-e-/script>
  </body>
</html>

seperti biasa hilangkan tanda -e- , oke maka hasilnya akan sama seperti di atas ya teman-teman, saya rasa cukup sampai disini dulu belajar kita tentang cara merubah bentuk lingkaran pada gambar dengan bootstrap, semoga bermanfaat dan sampai jumpa.