Put border in empty progress bar

user_5043301 0
Viewed 254

I am using Bootstrap Progress Bar. My Code is like below

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

I would like to put border in above Progress Bar.

bootstrap-4 progress-bar border css
3 Answers

<!-- bootstrap.min.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="progress border border-success">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Please add border class in bootstrap

Also add color too

  • border-success
  • border-info
  • border-danger
  • border-warning
  • border-secondary
  • border-primary
  • border-white etc
user_133686580

I am not sure you're asking for the upper div or the actual progress bar, but I have given it for both:

.progress {
  border: 2px solid green;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="progress">
  <div class="progress-bar" style="width:50%;border:2px solid red;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

user_35643590

Try this.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="progress border border-info">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
user_125479540
Related