Bootstrap 3 labels: filling available space - html

Question

I'm new to bootsrap, so this question might be trivial, but I'm having problem sizing labels.
Here is a simple code snippet:
<div class="container">
<div class="row">
<div class="col-xs-3">
<input type="submit" value="<< Back" class="btn btn-danger btn-block"></input>
</div>
<div class="col-xs-9">
<label class="label-info label col-xs-12">This label is too little!</label>
</div>
</div>
</div>
You can find a working JSFiddle here:
http://jsfiddle.net/DTcHh/2446/
As you can see the input occupies the 3 columns it is assigned correctly and is also taller than the label. I'd like the label to:
Be the same height as the button
Fill up all the available horizontal space (the 9 columns it is assigned, as opposed to only filling up the space needed for the text, as it is doing now).
The behavior is correct for the button thanks to the btn-block class which makes it fill the available 3 columns, but there isn't an equivalent for the label.
How can I achieve this? It's probably really simple but I'm a noob at web stuff and bootstrap in particular, can anybody enlighten me?

Answer 1

The base .label style won't allow that. My advice would be to define your own .label-block style which you can use in place of label. Something like this would work
.label-block {
font-weight: normal;
display: block;
padding: 6px 12px;
margin: 0;
border: 1px solid transparent;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
width: 100%;
}
And then within your html, just use that style instead of label
<div class="container">
<div class="row">
<div class="col-xs-3">
<input type="submit" value="<< Back" class="btn btn-danger btn-block"></input>
</div>
<div class="col-xs-9">
<label class="label-info label-block">This label is too little!</label>
</div>
</div>
</div>
JSFidlle for reference.