Decrease height of "Row"

Question

I have a panel and inside it a progress bar, where I created a line inside the panel and put my progress bar.

HTML:

div class="panel with-nav-tabs panel-success">
        <div class="panel-heading">Etapa</div>
        <div class="panel-body"> 
        </div>
        <div class="row">
         <div class="col-md-6 col-md-offset-2">
         <div class="progress progress-success">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        </div>
    </div>
        </div>

Upshot:

Problem: It is taking up too much screen space because the line height is too big for the progress bar. Does anyone know how to decrease to take up less space?

Answer 1

Why don’t you just set a width for the element via CSS?

body {
  background-color:#ccc !important; /* Apenas para ver a barra melhor, não é necessário */
}

div.progress {
  margin:50px auto; /* Posicionar melhor a barra nesse exemplo, não é necessário */
  width:250px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    Exemplo
  </div>
</div>