How do I make my bulma progress bar not go over the whole screen?

Question

This is my current code:

<progress class="progress is-warning" value="25" max="100">25%</progress>

I would want the progress bar to be shorter, meaning it not being as wide.

Answer 1

Add max-width: <size>;, f.e. to adjust your progress bar width.

/* progress wrapper to show adjusted progress size */
.progress-wrapper {
  background-color: #ff6a0075;
  padding: .2rem;
}

.progress {
  /* width prop added for example purpose, to simulate wide bar */
  width: 100%;
  max-width: 200px;
}

<div class="progress-wrapper">
  <progress class="progress is-warning" value="25" max="100">25%</progress>
</div>