'Bootstrap 5: putting progress bar inside a card

I'm recently learning bootstrap and I wonder how could I put progress bar into a card so that I could develop my design. I used inline-block and inline but i didn't even show anything. So I ended up using flex box, but it's still weird. Here is what I've got. enter image description here

This is the html:

<div class="card-header">Languages</div>
<div class="card-body text-dark">
  <h4 class="card-text">
    <div class="d-flex">Korean: 
      <div class="progress-bar bg-light" style="width:100%"></div>
    </div>
    <div class="d-flex">English: 
      <div class="progress-bar bg-dark" style="width:90%"></div>
    </div>
    <div class="d-flex">Chinese: 
      <div class="progress-bar bg-dark" style="width:85%"></div>
    </div>
  </h4>
</div>
htmlcssflexboxbootstrap-5


Solution 1:[1]

i don't know expected result but i made as i understand. your first fault; your progress bar should be inside <div class="progress"></div> and other if you are using flex you have to give width children for fit

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card m-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title border-bottom pb-1">Languages</h5>
    <h4 class="card-text">
      <div class="d-flex">
        <div class="w-50">Korean</div>
        <div class="progress my-1 w-50">
          <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="d-flex">
        <div class="w-50">English</div>
        <div class="progress my-1 w-50">
          <div class="progress-bar bg-dark" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="d-flex">
        <div class="w-50">Chinese</div>
        <div class="progress my-1 w-50">
          <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </h4>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 gokhancevik

Related Questions