belajar bootstrap4, tutorial Bootstrap 4

Pengaturan Image di Bootstrap 4 | Bootstrap 4 Tutorial

Dalam tutorial Bootstrap 4 kali ini kita akan belajar bagaimana cara mengatur image di web berbasis bootstrap 4. Pengaturan image ini mencakup beberapa hal diantaranya cara mengatur bentuk image di bootstrap 4, cara memberi efek gambar di bootstrap 4 dan beberapa pengaturan lainnya.

Cara Mengatur bentuk Image di Bootstrap 4

Ada 3 bentuk image yang bisa anda gunakan diantaranya:

Rounded Corners Images

Image dengan bentuk rounded corner (kotak dengan radius di tiap sudut) menggunakan nama class .rounded di dalam tag img sebagai berikut:

<img src="namagambar.jpg" class="rounded" alt="tutorial bootstrap 4">

Circle Image

Image dengan bentuk lingkaran bisa diperoleh dengan menambahkan class .rounded-circle di dalam tag img sebagai berikut:

<img src="namagambar.jpg" class="rounded-circle" alt="tutorial bootstrap 4">

Thumbnail Image

Image dengan bentuk Thumbnail bisa diperoleh dengan menambahkan class .img-thumbnail di dalam tag img sebagai berikut:

<img src="namagambar.jpg" class="img-thumbnail" alt="tutorial bootstrap 4">

Pengaturan Posisi Gambar di Bootstrap 4

Ada 3 posisi gambar yang bisa anda atur yaitu posisi rata kiri, tengah, dan rata kanan.

Gambar Rata Kiri (left aligned)

Image dengan posisi rata kiri diperoleh denganmenambahkan nama class .float-left di dalam tag img sebagai berikut:

<img src="namagambar.jpg" class="rounded float-left" alt="tutorial bootstrap 4">

Gambar Rata Kanan (Right aligned)

Image dengan posisi rata Kanan diperoleh denganmenambahkan nama class .float-right di dalam tag img sebagai berikut:

<img src="namagambar.jpg" class="rounded float-right" alt="tutorial bootstrap 4">

Gambar Posisi Tengah (Center aligned)

Image dengan posisi tengah diperoleh denganmenambahkan nama class .mx-auto (margin: auto) dan .d-block (display:block) di dalam tag img sebagai berikut:

<img src="namagambar.jpg" class="rounded mx-auto d-block" alt="tutorial bootstrap 4">

Semoga Bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>