5

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!

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
xam
  • 452
  • 2
  • 7
  • 15

2 Answers2

12

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
Timothy Kanski
  • 1,861
  • 14
  • 20
  • thank you, this works. I am open for any other elegant or bootstrap solutions. Thanks! – xam Apr 29 '16 at 22:58
  • @xam the bootstrap "progress" has a default margin of 20px, how else would you want it done? – Adam Buchanan Smith Apr 29 '16 at 23:04
  • Your only other option would be to put it in the css see fiddle https://jsfiddle.net/1ts9b5m4/2/ – Adam Buchanan Smith Apr 29 '16 at 23:05
  • I've looked around on http://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;` – Timothy Kanski Apr 29 '16 at 23:12
0

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.

Hondaman900
  • 109
  • 2
  • 14