How to get a responsive button in bootstrap 3

Question

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>

Solution 3

For anyone who may be interested, another approach is using @media queries to scale the buttons on different viewport widths..

Demo: http://bootply.com/93706

Solution 4

In some cases it's very useful to change font-size with relative font sizing units. For example:

.btn {font-size: 3vw;}

Demo: http://www.bootply.com/7VN5OCVhhF

1vw is 1% of the viewport width. More info: http://www.sitepoint.com/new-css3-relative-font-size/

Solution 5

<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

We can use btn-block for automatic responsive.

View more solutions

Comments

[Giovanni Silveira]

Setting a width for the button defeats the purpose of a responsive button, though.

[MattDiamant]

you don't have to set a width, bootstrap will set it for you. I was just using a set width to illustrate that setting white-space to normal will make the button wrap when the button's width exceeds it's maximum. white-space: normal; does all the work.

[blurfus]

I'd make it a class (so you can re-use it on all your buttons) and remove the width: .multi-line-button { white-space: normal; }

[MattDiamant]

I was just using #new-board-btn, because that's what the button is currently set to. You can use whatever class you'd like, obviously.

[George Filippakos]

Smaller buttons on smaller screens - more difficult to click for people with fat fingers

[raacer]

@geo1701 Unfortunately smaller resolution not always means smaller screen.

[Adam C]

I'd be tempted to make a class too, but rather than call it .multi-line-button call it .text-wrap (as there already is a Bootstrap class called .text-nowrap) so you'd be keeping things as abstract as possible, ensuring its acceptable use on non-button items.

[MattDiamant]

1) It should surely be a class. Don't use ids at all in CSS. 2) Naming things properly is hard and subjective. 3) This CSS snippet works with the provided html, and exists to provide example, and both HTML and CSS should be modified to fit your use case.

[Tommix]

since when static width is part of responsive design?

[PropertyWebBuilder]

Thanks for your contribution - it is indeed an improvement so I've given it an upvote.

[MattDiamant]

The width has been removed from this answer, to avoid the confusion surrounding it.

[mur7ay]

Make the button extend vertical which is highly ugly.

[Wade]

@mur7ay - That is your opinion. In my opinion, it is much harder to read (and uglier) when the text of a button doesn't wrap properly. While resizing based on vw would shrink the text and be better. There are many times when it's ok to break the word, or you have most checks in place (ie: using vw) but want it to wrap properly if all else fails.

[Sara44]

@Wade - Good solution, I prefer this one and it solves the original problem. Upvoted.