Langsung ke konten utama

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-left: 15px;
 }
}

Postingan populer dari blog ini

Penyebab browsing internet lambat dan cara mengatasi

Browsing internet lambat  pada saat browsing di internet. Jika browser lambat maka otomatis internet juga akan terasa lambat walaupun signal wifi / wireles full. Penyebabnya bisa saja pada laptop sobat, lebih tepatnya adalah aplikasi browser yang sobat gunakan bermasalah. Bisa karena google chromenya atau mozilla yang memang lagi bermasalah. Periksa add ons masing-masing browser Mungkin saja sobat menggunkan add ons yang banyak. Jika sobat tidak membutuhkanya silahkan dihapus saja. Misalanya beberapa add ons yang paling berpengaruh, adalah add ons yahoo toolbar, ads block dan sebagainya, add ons ini akan melakukn filtering content dan menggunakan bandiwidth internet sobat untuk menjalankannya. komputer sobat terkena spyware Ini yang paling sering terjadi. Browser sobat dibanjiri spyware, spyware bisa dalam bentuk iklan yang tidak jelas muncul tiap saat ketika sobat menggunakan browser. Iklan ini selain memenuhi layar juga akan menggunakan koneksi internet untuk menampilkan iklann

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>

Open Live Writer aplikasi blog writing

Open Live Writer  adalah alternatif pengganti microsoft esensial 2012 yang saat ini saya mengalami kesulitan untuk login menggunakan akun google, entah masalahnya ada dimana ?. Karena kurang pamiliar dengan editor blogspot maka saya pun iseng-iseng mencari beberapa alternatif aplikasi blog writing yang bisa di gunakan secara offline. , aplikasi blog writing editor blog sangat  ringan memungkinkan untuk membuat posting blog, menambahkan foto dan video kemudian mempublikasikan ke website. Juga dapat menulis blog posting offline dan kemudian mempublikasikannya Nanti. Open Live Writer bekerja dengan banyak penyedia layanan blog populer seperti WordPress , Blogger , TypePad , Jenis Moveable , DasBlog dan banyak lagi. Download Aplikasi disini