css Question posted in
Some basic documentation can be found here.

Css – How can I automatically fill remaining space in a Bootstrap 2 progress bar?

I have a Bootstrap progress bar. I’d like the last div, which has the classes bar bar-warning to occupy everything that isn’t already occupied by the other inner divs without me having to do calculations. i’d like to get something like width: everything-else, however obviously that isn’t valid css. i’ve tried different solutions, such as making the width auto, 100%, -100% etc, but none of these work sadly.

An alternative solution would be to just put the text into that area and center it relative to the non-filled area. However, I couldn’t do that either.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="progress progress-striped">
  <div class="bar bar-success" style="width: 14.5%;"></div>
  <div class="bar bar-info" style="width: 14.6%;"></div>
  <div class="bar bar-warning" style="width: 70.9%;"></div>
</div>
Tags:

2

Answers


  1. 0

    For a no-CSS solution, just put the warning bar styles on the chart itself, so they show wherever other bars don’t.

    We can hack the markup a bit to take advantage of Bootstrap’s style classes. By moving the controlling class out a level we maintain the ancestral relationship necessary to do so. This eliminates the need for a final bar, but if you do have one it doesn’t have a width anyway, so it’s not a problem.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="progress-striped">
  <div class="progress bar bar-warning">
    <div class="bar bar-success" style="width: 14.5%;"></div>
    <div class="bar bar-info" style="width: 44.6%;"></div>
    <div class="bar bar-warning"></div>
  </div>

  <div class="progress bar bar-warning">
    <div class="bar bar-success" style="width: 54.5%;"></div>
    <div class="bar bar-info" style="width: 24.6%;"></div>
  </div>
</div>

    If you actually need the final bar to be present and the proper size, you can use flexbox.

    .progress {
  display: flex;
}

.progress .bar:last-child {
  flex: auto;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="progress progress-striped">
  <div class="bar bar-success" style="width: 14.5%;"></div>
  <div class="bar bar-info" style="width: 44.6%;"></div>
  <div class="bar bar-warning"></div>
</div>

<div class="progress progress-striped">
  <div class="bar bar-success" style="width: 34.5%;"></div>
  <div class="bar bar-info" style="width: 14.6%;"></div>
  <div class="bar bar-warning"></div>
</div>
    Login or Signup to reply.
  2. 0

    You can use flex for this:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="progress progress-striped" style="display: flex;">
  <div class="bar bar-success" style="width: 14.5%;"></div>
  <div class="bar bar-info" style="width: 14.6%;"></div>
  <div class="bar bar-warning" style="flex-grow:1;"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search