Membuat Border Menggunakan Bootstrap 4

Cara Membuat Border Menggunakan Bootstrap 4– pada kesempatan kali ini saya akan membahas tentang bootstrap lagi yaitu tentang cara membuat border. Sudah banyak artikel yang saya bahas mengunakan bootstrap. Seperti yang sobat tahu, bootstrap sudah menyediakan banyak sekali fitur-fitur yang bisa digunakan. Tentunya dengan menggunakan bootstrap ini sobat sudah bisa mengikuti standar internasional karena bootstrap ini dipakai oleh banyak negara dan banyak bahasa pemrograman.Cara membuat border untuk sebuah teks, atau gambar/image, ataupun video sangat mudah sobat hanya perlu ikuti cara dibawah.

Sebelum memulainya tentu sobat perlu memasukkan librari css dari bootstrap karena jika tidak maka tidak akan berhasil. Bootstrap yang saya gunakan adalah bootstrap 4 dan sobat bisa menyesuaikan dengan project sobat. Masukkan kode dibawah ini pada tag <head>

Kemudian untuk demo saya buat juga cssnya karena saya mencontohkan bordernya pada <span> supaya sobat bisa dengan jelas melihatnya jadi saya perlu membuat cssnya seperti berikut namun jika sobat ingin langsung dicoba pada project maka tidak perlu css ini

Css diatas hanya untuk emmbuat kotaknya saja. Cara penggunaan dari border adalah sebagai berikut

Jika sobat ingin membuat border hanya diatas maka sobat bisa menambahkan class .border-top. Namun jika ingin menambahkan pada atas dan bawah bisa sobat gabungkan menjadi .border-top border-bottom. Untuk posisinya bisa gunakan di atas, bawah, kanan, maupun kiri saja tau bisa digabungkan sesuai kebutuhan sobat.

Hasil dari script diatas adalah seperti berikut

Cara Membuat Border Berwarna

Bootstrap sendiri juga memberikan banyak varian warna pada border. Warna ini merupakan warna standar seperti saat sobat membuat button, background, tks warna dan lain-lain. Contohnya adalah sebagai berikut

Maka akan menghasilkan seperti dibawah

 

Cara Membuat Border Image

Berikut cara membuat border pada gambar

1. Border Standar

Jika menggunakan class ini maka secara otomatis gambar tidak lancip, penggunaannya adalah sebagai berikut

Hasilnya :

 

2. Border Top

Jika menggunakan class .rounded-top maka yang tidak lancip hanya bagian atas.

Hasilnya :

 

3. Border Right

Jika menggunakan class .rounded-right maka yang tidak lancip hanya bagian kanan.

Hasilnya :

 

4. Border Bottom

Jika menggunakan class .rounded-bottom maka yang tidak lancip hanya bagian bawah.

Hasilnya :

 

5. Border Left

Jika menggunakan class .rounded-left maka yang tidak lancip hanya bagian kiri.

Hasilnya :

 

6. Border Circle

Jika menggunakan class .rounded-circle maka gambar akan berbentuk oval. Berikut adalah cara membuat gambar berbentuk oval :

Hasilnnya :

 

7. Border Pill

Jika menggunakan class .rounded-circle maka gambar akan berbentuk pill. Kenapa bernama pill ya sobat lihat saja pill/obat maka bentuknya akan seperti ini. Berikut adalah cara membuat gambar berbentuk pill :

Hasilnya :

 

8. Border Bulat

Untuk membuat border gambar menjadi bulat penggunaannya sama seperti saat membuat border oval hanya saja untuk width dan height kita samakan seperti contoh dibawah

Hasilnya :

 

Begitulah cara membuat border menggunakan bootstrap. Ada banyak fitu yang disediakan oleh bootstrap namun terkadang programmer banyak yang belum mengetahui semuanya. Oleh karena itu sobat bisa mengunjungi postingan saya yang lain ada tentang bootstrap dan javascript juga. Sekian postingan saya tentang Membuat Border Menggunakan Bootstrap 4. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan bisa sobat tinggalkan pada kolom komentar dibawah.

 

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Nested Media Object pada Bootstrap 4

Membuat Navbar dengan Bootstrap 4 dengan Mudah

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

2 thoughts on “Membuat Border Menggunakan Bootstrap 4

Leave a Reply

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

one × 3 =