CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Shane
Shane

Reputation: 5677

Append text before and after progress bar

How can i append text before and after the progress-bar. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-git.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="show">60% Complete</span>
  </div>
</div>           
</body>
</html>

Below is the jsbin i am working on. http://jsbin.com/IBOwEPog/219/edit

Upvotes: 0

Views: 1750

Answers (3)

Rob Erskine
Rob Erskine

Reputation: 927

If you're cool with using jQuery, you can use the prepend and append methods.

 $('.progress').append("Text Before").prepend("Text After");

Upvotes: 0

WongKongPhooey
WongKongPhooey

Reputation: 394

May have got the wrong idea on this but this makes the 2 spans of text appear on either side of the progress bar.

Both spans are now outside of the progress div.

margin-left on the progress bar gives space for the left-hand side text

Hope this helps

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-git.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<span id="analysis_volume" class="show">Analysis Volume</span>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    </div>
    <span id="usage" class="show">&nbsp;60% Complete</span>
</div>



</body>
</html>

/**
 * Progress bars with centered text
 */

.progress {
  position: relative;
  margin-left:110px;
}

#analysis_volume {
    position: absolute;
    display: block;
    text-align:left;
    width: 100%;
    color: black;
}

Upvotes: 0

T J
T J

Reputation: 43156

try

$('.progress-bar').before("Text Before").after("Text After");

Upvotes: 1

Related Questions