I am trying to create a button having some text over it. But the text is not wrapping on the button. Here is what i have done.
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<input type="radio" id="1" class="hidden">
<label for="1" class="btn btn-info btn-preference pull-right">Stability</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<input type="radio" id="1" class="hidden">
<label for="1" class="btn btn-primary btn-preference text-center">
<span class="break-wo">Freedom and Risk</span>
</label>
</div>
</div>
Here is the Link for bootfly
It's not the wrap, it's white-space: nowrap;
which is preventing the text to wrap when used .btn
which contains white-space: nowrap;
so use white-space: normal;
label[for="1"].btn {
white-space: normal;
}
Note: Your ID
value is invalid, you cannot start an id
with a number
Have you tried adding white-space: normal;
to your span class="break-wo"
? This should help.
Try this way...
<div class="radio">
<label class="btn btn-info">
<input type="radio" id="1" name="optionsRadios" class="hidden" value="option1" checked>
Option one
</label>
</div>
Adding the tag inside the label
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.