Menu
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?
997
use the flexbox property. The "cursor:pointer" changes the mouse cursor to pointer and the "font-size" and "height" are in rem unit just to make the button responsive. The "border:none" removes the annoying border and "border-radius:10px" makes the button edges circular (which is just nice).
Add the . flex-wrap class to your button group container. Show activity on this post. If, like me, you don't necessarily need the buttons to be in a group, you could also use the btn-toolbar class which defines flex-wrap: wrap by default.
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/
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
