Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Bootstrap

Bootstrap 5 Column Layout

Untuk membuat desain web yang resvonsive bootstrap memang plihan yang paling bagus, bootstrap bersifat firmewok dimana terdapat aturan yang harus di ikuti mendapatkan hasil yang maksimal, contohnya pada pembuatan colomn menggunakan col-1 sampai col-12 hal ini akan menjadi persoalan jika ingin menampilakn kolom ganjil bisalnya 5 dan mempunyai width sama. solusinya adalah dengan membuat column baru dengan format sendiri, jika tertarik bisa menggunakan snippet dibawah. <div class="container"> <div class="row"> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> <div class="col5 col-sm-6"> </div> </div> </div> @media(min-width: 992px){ .col5{ width: 20%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-...

Cara buat vertical progress Bar di bootstrap

Untuk membuat layout progress bar menggunakan bootstrap sangat mudah namun jika progress bar yang diinginkan berbentuk vertical dan sesuai dengan keinginan sepertinya agak susah. berikut contoh menampilkan progress bar pada bootstrap. <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <div class="vertical-skills pull-right xs-center"> <ul class="list-inline"> <li><span class="skill" style="background: #ff0000; height: 90%;"></span><span class="title">HTML</span></li> <li><span class="skill" style="background: #00bbff; height: 85%;"></span><span class="title">CSS</span></li> <li><span class="skill" style="background: #9168e5; height: 75%;"></span><span class="title">PHP</span></li> <li>...