Question 244052 in Html Question posted in
Some basic documentation can be found here.

Html – Text in Bootstrap progress bar is clipped

I am having a problem with bootstrap’s progress bar. The span text I want displayed inside is only showing the bottom half and I can’t figure out why.

I am doing a code along with my course and I have checked it thoroughly and can’t see any difference in the code.

Our IDEs are different. He’s using cloud9 and I am using codeanywhere. I wouldn’t have thought that would matter.

I tried to continue with the code along and add CSS thinking it might sort it out. But the problem persisted

Code Snippet

.progress {
  position: relative;
  height: 25px;
  margin-bottom: 4px;
}

.progress-type {
  position: absolute;
  left: 0px;
  font-weight: 400;
  padding: 3px 30px 2px 10px;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}
<div class="row">
  <div class="col">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
        <span class="sr-only">90% Complete</span>
      </div>
      <span class="progress-type">HTML / HTML5</span>
    </div>
  </div>
</div>


<!-- Bootstrap 5.3 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Tags:

2

Answers


  1. 0

    It works if I override Bootstrap and force the height using !important.

    .progress {
  position: relative;
  height: 25px !important;
  margin-bottom: 4px;
}

.progress-type {
  position: absolute;
  left: 0px;
  font-weight: 400;
  padding: 3px 30px 2px 10px;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}
    <div class="row">
  <div class="col">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
        <span class="sr-only">90% Complete</span>
      </div>
      <span class="progress-type">HTML / HTML5</span>
    </div>
  </div>
</div>


<!-- Bootstrap 5.3 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    Login or Signup to reply.
  2. 0

    This isn’t a Bootstrap or height problem. It’s a matter of how you’re centering your absolutely positioned element. (The parent of such an element does not expand to contain it, per HTML spec.) Use a more standard method for that (not padding) and it’s fine.

    How to center div vertically inside of absolutely positioned parent div

    .progress-type {
  position: absolute;
  left: 0;
  top: 50%; /* put the top edge half way down */
  transform: translateY(-50%); /* shift the text up half its height */
  padding: 0 30px 0 10px;
  font-weight: 400;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}
    <div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="progress position-relative">
        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
          <span class="sr-only">90% Complete</span>
        </div>
        <span class="progress-type">HTML / HTML5</span>
      </div>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search