CODEWITHSUNDEEP
csstwitter-bootstrap
Arnas Pecelis
Arnas Pecelis

Reputation: 149

progress bar is not showing at all

I'm using bootstrap installed via npm SCSS @import './../../../node_modules/bootstrap/scss/bootstrap.scss'; and custom theme CSS for my template but somehow progress bar is not being displayed at all. It's just missing from my page.

<div class="row">
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>
</div>

the same problem was with well, the class was just missing. NPM bootstrap version is ^4.1.1. Inspecting created element in DOM I see that progress bar css is there, so bootstrap is working, why not progress bar?

enter image description here

Upvotes: 1

Views: 3157

Answers (1)

fen1x
fen1x

Reputation: 5880

Check out bootstrap docs:

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Wrap your progress with col and everything should work.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<div class="row">
  <!-- This one has no width -->
  <div class="progress">
    <div class="progress-bar progress-bar bg-warning progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col">
    <!-- This one has width 100% -->
    <div class="progress">
      <div class="progress-bar progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions