Skip to content

Instantly share code, notes, and snippets.

@LTroya

LTroya/Example.html

Created May 26, 2017 02:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LTroya/b7b668ffc0a1f21b0e1faacd11a5aa6b to your computer and use it in GitHub Desktop.
Save LTroya/b7b668ffc0a1f21b0e1faacd11a5aa6b to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap progress bar height not matching with others
Raw
Example.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {
padding: 40px 20px;
}
.progress {
height: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 no-padding-left">
They_expected_all.psd
<span class="glyphicon glyphicon-ok pull-right"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9 no-padding-left">
They_expected_all.psd
<span class="glyphicon glyphicon-ok pull-right"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9 no-padding-left">
They_expected_all.psd
<span class="glyphicon glyphicon-ok pull-right"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9 no-padding-left">
They_expected_all.psd
<span class="glyphicon glyphicon-ok pull-right"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9 no-padding-left">
They_expected_all.psd
<span class="glyphicon glyphicon-ok pull-right"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@LTroya
Copy link
Author

LTroya commented May 26, 2017 •
edited

JsBin: http://jsbin.com/qudacer/edit?html,css,output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment