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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
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
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
margin: 6px;
background-color: #555;
}
</style>
Css diatas hanya untuk emmbuat kotaknya saja. Cara penggunaan dari border adalah sebagai berikut
<span class="bg-light border"></span> <span class="bg-light border-top"></span> <span class="bg-light border-right"></span> <span class="bg-light border-bottom"></span> <span class="bg-light border-left"></span> <span class="bg-light border-top border-bottom"></span>
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
<span class="bg-light border border-primary">.border-primary</span> <span class="bg-light border border-secondary">.border-secondary</span> <span class="bg-light border border-success">.border-success</span> <span class="bg-light border border-danger">.border-danger</span> <span class="bg-light border border-warning">.border-warning</span> <span class="bg-light border border-info">.border-info</span> <span class="bg-light border border-light">.border-light</span> <span class="bg-light border border-dark">.border-dark</span> <span class="bg-light border border-white">.border-white</span>
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
<img src="logo.png" alt="image" height="75px" class="rounded">
Hasilnya :
2. Border Top
Jika menggunakan class .rounded-top maka yang tidak lancip hanya bagian atas.
<img src="logo.png" alt="image" height="75px" class="rounded-top">
Hasilnya :
3. Border Right
Jika menggunakan class .rounded-right maka yang tidak lancip hanya bagian kanan.
<img src="logo.png" alt="image" height="75px" class="rounded-right">
Hasilnya :
4. Border Bottom
Jika menggunakan class .rounded-bottom maka yang tidak lancip hanya bagian bawah.
<img src="logo.png" alt="image" height="75px" class="rounded-bottom">
Hasilnya :
5. Border Left
Jika menggunakan class .rounded-left maka yang tidak lancip hanya bagian kiri.
<img src="logo.png" alt="image" height="75px" class="rounded-left">
Hasilnya :
6. Border Circle
Jika menggunakan class .rounded-circle maka gambar akan berbentuk oval. Berikut adalah cara membuat gambar berbentuk oval :
<img src="logo.png" alt="image" height="75px" class="rounded-circle">
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 :
<img src="logo.png" alt="image" height="75px" class="rounded-pill mb-2">
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
<img src="logo.png" alt="image" height="100px" width="100px" class="rounded-circle">
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 :