Reddy Reddy - 4 months ago 72
CSS Question

Bootstrap 4 - Customize Progress Bar

I am using Bootstrap 4 alpha. How can I customize (Eg: removing border-radius, changing bar base color, filled color etc...)?

Tried with below code.. but it is not working though :(

LIVE DEMO




HTML

<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>


CSS

.b4-test{
padding:50px;
width:500px;
margin:50px auto;
text-align:center;
background:#ccc;
}

progress{
border-radius:0 !important;
background-image:none !important;
background-color:red !important;
color:green !important;
height:50px;
}

Answer

Check this snippet in Firefox

This snippet will work in Firefox only..

Edit

I have also created plunker to show in Firefox please check this

Firefox Plunker

.b4-test {
  padding: 50px;
  width: 500px;
  margin: 50px auto;
  text-align: center;
  background: #ccc;
}
.progress[value] {
  border-radius: 0;
  background-color: red;
}
.progress[value]::-moz-progress-bar {
  background-color: green;
}
<div class="b4-test">
  <progress class="progress" value="75" max="100">75%</progress>
</div>

For Chrome check the below plunker

check this Chrome Plunker