Skip to content

Instantly share code, notes, and snippets.

@LTroya LTroya/Example.html
Created May 26, 2017

Embed
What would you like to do?
Bootstrap progress bar height not matching with others
<!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

This comment has been minimized.

Copy link
Owner Author

commented May 26, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.