How to get a responsive button in bootstrap 3
I am using bootstrap 3 and I have the following html:
<div class="col-sm-2" >
<a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>
On a small screen, the text "Create New Board" is too long to fit on the button. I would like the text to wrap on to another line and the height of the button to increase to fit the text. Any tips on how to do this?
Solution 1:
In Bootstrap, the .btn
class has a white-space: nowrap;
property, making it so that the button text won't wrap. So, after setting that to normal
, and giving the button a width
, the text should wrap to the next line if the text would exceed the set width
.
#new-board-btn {
white-space: normal;
}
http://jsfiddle.net/ADewB/
Solution 2:
I know this already has a marked answer, but I feel I have an improvement to it.
The marked answer is a bit misleading. He set a width to the button, which is not necessary, and set widths are not "responsive". To his defense, he mentions in a comment below it, that the width is not necessary and just an example.
One thing not mentioned here, is that the words may break in the middle of a word and look messed up.
My solution, forces the break to happen between words, a nice word wrap.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
<a href="#" class="btn btn-primary btn-responsive">Click Here</a>