Cara Menempatkan Button Bootstrap Di Tengah (Center)

Pada kesempatan kali ini kursus website online akan menjelaskan cara menempatkan button bootstrap di tengah (center). Mungkin sebagian dari teman-teman sudah mengetahuinya, untuk menempatkan nilai yang ada di dalam element bootstrap bisa menggunakan class text-center di element tersebut. Namun terkadang dari class text-center tersebut tidak bisa diterapkan untuk button atau tombol bootstrap yang ingin teman-teman atur penempatannya supaya berada di tengah-tengah layout yang teman-teman buat, dikarenakan untuk button bootstrap tersebut property display nya masih bersifat inline, berikut penjelasan mengenai inline seperti di bawah ini :

1. inline merupakan elemen yang tidak memiliki pengaturan properti width(panjang) dan height (lebar). element tersebut defaultnya otomatis mengikuti nilai content yang ada didalamnya, dan meskipun di set nilai dari width dan height nya pada elemen tersebut. tidak akan berpengaruh.
2. inline merupakan elemen yang tidak memiliki pengaturan properti margin dan padding  (hanya atas dan bawah saja), dan meskipun di set nilai untuk margin-top atau margin-bottom pada elemen tersebut, itu tidak akan berpengaruh.
3. inline merupakan element yang tidak membuat garis baru dan menjadikan elemen tersebut bersebelahan dengan elemen yang setara dengannya (mengalir atau berjalannya ke samping kanan.

Jika teman-teman kursus website online lihat dari penjelasan inline di atas, bisa disimnpulkan bahwa saja button bootstrap tidak memiliki property width atau height dan berjalannya dari kiri mengalir ke samping kanan, jadi dengan display yang bersifat inline tersebut tidak akan terlihat peran dari class bootstrap text-center. Lalu bagaimana untuk menangani permasalahan tersebut ?

Pada class bootstrap menyediakan class khusus untuk merubah property css display inline menjadi display block, tanpa harus menambahkan atau merubah display property pada button bootstrap yang sudah ada. Untuk penerapannya, dapat teman-teman ikuti sesuai tahapan di bawah ini.

Berikut tahapannya :

• Disini saya asumsikan teman-teman sudah buka file yang ingin teman-teman terapkan untuk button bootstrap tersebut.
• Jika sudah teman-teman ketikan kode seperti berikut ini untuk menambahkan button bootstrap tersebut :

Seperti yang teman-teman lihat dari kode di atas, apabila teman-teman ingin menempatkan posisi buton  bootstrap menjadi ketengah dengan class text-center, maka tidak akan berpengaruh dikarenakan tag html button bootstrap berdiri sendiri dan punya aturan khusus tersendiri untuk penggunaannya, sedangkan apabila teman-teman mengikuti tahapan saya di atas dengan benar maka akan berjalan sesuai dengan keinginan teman-teman seperti pada contoh hasil gambar dibawah ini :

Sampai disini penjelasan kursus pembuatan website online mengenai cara menempatkan button Bootstrap di tengah (center), semoga bermanfaat.

Mau belajar membuat website bersama Dumet School Gratis? Mau Coba Kelas Gratis? Daftarkan diri anda untuk mendapatkan kelas gratis hubungi kami di 0819-9366-6688 atau via email ke info@dumetschool.com