CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
mrwadepro
mrwadepro

Reputation: 279

Progress bar will not display

I just want to add a progress bar to my page and I cannot even get it to display! I stripped the website down to a bare minimum to try to isolate what could but can't figure it out! I was thinking it was my custom css file I created, but I removed it and the issue persisted. 

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>STEMuli Explore</title>
</head>

<body>
  <div class="row h-100 justify-content-center">
    <a name="redirectHome" onClick="redirectHome()"><img src="/img/logo.png" class="img-fluid" width="100" height="100" alt="Responsive image">
    </a>
  </div>
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-6">
        <a href="#" name="redirectCreate" onClick="redirectCreate()">
          <h1 class="text-center">
              Create</h1>
        </a>
      </div>
      <div class="col-6 text-center">
        <a href="#" name="redirectExplore" onClick="redirectExplore()">
          <h1 class="text-center">
              Explore</h1>
        </a>
      </div>
    </div>
    <div class="row h-100 justify-content-center">
      <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script type="text/javascript" src="/js/redirect.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!--Logical JS files-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
</body>

</html>

Upvotes: 1

Views: 1401

Answers (3)

random_user_name
random_user_name

Reputation: 26160

This is likely due to a misunderstanding of the way the Bootstrap 4 grid system works.

Here's some tips for solving this specific issue, as well as issues in the future.

See the snippet below, which works:

  1. May I suggest you read the Bootstrap 4 grid docs, and you'll discover that this is all based on flex, so you either need to remove .row, add .col, or make other alterations to get the layout you are looking for.
  2. In the working snippet below, you'll notice I put "border" styles on the progress bars. This is a troubleshooting technique that can show you immediately what is going on (when I did with your code, all the progress bars were tiny-narrow, stacked tightly against each other horizontally).
  3. In the snippet below, I dramatically simplified the code. This is a practice for isolating the problem - simplify until it's just the one issue / item, solve it, then you can bake that back into your big-picture plan.
  4. Leverage the browser's developer tools and inspect the elements. Doing so reveals tons about what is going on. It's an essential tool in any web developer's toolkit, so learn it, master it. It is your friend!

.progress {
  border: 1px solid red;
}

.progress-bar {
  border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>STEMuli Explore</title>
</head>

<body>
  <div class="container">
    <div>Borders added to illustrate a troubleshooting technique</div>
    <div class="row h-100 justify-content-center">
      <div class="col">
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script type="text/javascript" src="/js/redirect.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!--Logical JS files-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

Upvotes: 2

Rocks
Rocks

Reputation: 1155

Remove the class row from the parent div containing the progress bars.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>STEMuli Explore</title>
</head>

<body>
  <div class="row h-100 justify-content-center">
    <a name="redirectHome" onClick="redirectHome()"><img src="/img/logo.png" class="img-fluid" width="100" height="100" alt="Responsive image">
    </a>
  </div>
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-6">
        <a href="#" name="redirectCreate" onClick="redirectCreate()">
          <h1 class="text-center">
            Create</h1>
        </a>
      </div>
      <div class="col-6 text-center">
        <a href="#" name="redirectExplore" onClick="redirectExplore()">
          <h1 class="text-center">
            Explore</h1>
        </a>
      </div>
    </div>
    <div class="h-100 justify-content-center">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script type="text/javascript" src="/js/redirect.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!--Logical JS files-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

Upvotes: 2

pandamakes
pandamakes

Reputation: 591

The containing div class row h-100 probably expects a blocky content. I am not too familiar with bootstrap4, but in bootstrap3, there is this concept of col-md-12... wrap the progress bar by div with class col-lg or something?

<div class="row h-100 justify-content-center">
  <div class = "col-lg">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</div>

ps ctrl shift i is your friend

Upvotes: 0

Related Questions