how to remove the whitespace below the bootstrap progress bar

Question

How can I remove or minimize the gap in between progress bar and string:

<div class='progress'><div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 80%;'></div></div>
<!--Here will be a huge whitespace, and needs to be removed-->
remove white space above this line

Here is a fiddle: http://jsfiddle.net/1ts9b5m4/

Thanks in advance!

Bardwell

Do you think we've enough information to help you ? – Impel

@PedroLobito Totally. – Tabloid

@PedroLobito Explain why there is not enough info, OP added html and default bootstrap has the css, what else is needed? – Gyre

@AdamBuchananSmith the user posted a link to an actual example after my question - jsfiddle.net/1ts9b5m4 . It's better now, but the example should be posted on SO and not on an external website. – Impel

Answer 1

Use style="margin-bottom:0px;"

<div class='progress' style="margin-bottom:0px;"><div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 80%;'></div></div>
<!--Here will be a huge whitespace, and needs to be removed-->
remove white space above this line

Tabloid

thank you, this works. I am open for any other elegant or bootstrap solutions. Thanks! – Bardwell

@Bardwell the bootstrap "progress" has a default margin of 20px, how else would you want it done? – Gyre

Your only other option would be to put it in the css see fiddle jsfiddle.net/1ts9b5m4/2 – Gyre

I've looked around on getbootstrap.com/customize and it doesn't let you change the margin-bottom there. There is another option. If you're hosting the bootstrap css yourself, and not relying on a CDN, you could make the change there. There is a .progress{ margin-bottom:20px; ... }; Just remove the margin-bottom:20px; – Tabloid

Answer 2

Margin alone didn't work for me. I had to override both margin-bottom and height CSS attributes for the progress bar. I placed this into a small blade file and used @include to place it in the content section of forms that used progress bar.

In a file views/splitpieces/overridecss.blade.php:

<style>
.progress-bar{ 
    margin-bottom:0px;
    height:1%;
}
</style>

In the form using progress bar:

@include('splitpieces.cssoverride')

For me this had to be inside the @section('content') to work, otherwise the bootstrap CDN trumped the style modifier.

Hope this helps.

Claymore