Decrease row height

Question

Decrease row height

Navigation

#1 by (1 votes)

0

I have a panel and inside it a progress bar, where I created a line inside the panel and placed 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>

Result:

Problem: You are taking up too much screen space because the line height is too large for the progress bar. Does anyone know how to shrink to take up less space?

html twitter-bootstrap

asked by anonymous 08.05.2015 / 20:57

1 answer

Extract the products from an NFe XML How to make a hybrid application for Android run in the background?

score 1 · Answer 1

Why do not you just define 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>