belajar bootstrap4, tutorial Bootstrap 4

Membuat Progress Bar dengan Bootstrap | Tutorial Bootstrap 4

Sebenarnya membuat progress bar di bootstrap bukanlah hal yang sulit. Namun karena keterbatasan pengetahuan kita terkadang membuat sesuatu hal yang mudah menjadi terasa begitu sulit.

Untuk membuat progressbar, cukup tambahkan class .progress ke dalam tag element utama, diikuti dengan class .progress-bar pada child element, sebagai berikut:

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Hasilnya akan seperti ini:

Mengatur ketebalan Progressbar

Untuk mengatur ketebalan progress bar di bootstrap 4, kita bisa memanfaatkan CSS property height. Dan harus anda ingat, nilai height harus sama antara element induk dengan child element.

Contoh:

<div class="progress" style="height:10px">
<div class="progress-bar" style="width:40%;height:10px"></div>
</div>

<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>

<div class="progress" style="height:30px">
<div class="progress-bar" style="width:40%;height:30px"></div>
</div>

Hasilnya:

Pengatur Lebar Progress

Untuk mengatur Lebar progress, tinggal sesuaikan nilai width sebagai berikut:

Contoh:


<div class="progress" style="height:20px">
<div class="progress-bar" style="width:25%;height:20px"></div>
</div>

<div class="progress" style="height:20px">
<div class="progress-bar" style="width:50%;height:20px"></div>
</div>

<div class="progress" style="height:20px">
<div class="progress-bar" style="width:75%;height:20px"></div>
</div>

<div class="progress" style="height:20px">
<div class="progress-bar" style="width:100%;height:20px"></div>
</div>

Hasilnya:

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>