How to wrap text inside bootstrap button without changing button size?

user_3492996 0
Viewed 17093

I'm trying to wrap or resize text inside bootstrap button without changing button size.I have couple buttons that must be aligned

I've used this class,text is wrap but button grows in size affecting the alignment with other buttons

 .btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
}

There is sample code,just resize the view: https://jsfiddle.net/mrapi/3yv314dx/1/

thanks

twitter-bootstrap-3 twitter-bootstrap css html
3 Answers

Not sure why all the complicated solutions.

Just add the following to your .btn css:

white-space: normal;

So, if you already have a .btn in your global css file, do this:

.btn {
    white-space: normal;
}

Or if you do not have anything in your global css file, just do it inline, such as:

<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>

Note: This method may not work on archaic versions of IE

user_7976200
Related