How to get a responsive button in bootstrap 3

Question

I am using bootstrap 3 and I have the following html    lt div class  col-sm-2   gt       lt a id  new-board-btn  class  btn btn-success   gt Create New Board lt  a gt   lt  div gt    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

User · Answer

lt a href     gt  lt button type  button  class  btn btn-info btn-block regular-link  gt   lt span class  text  gt Create New Board lt  span gt  lt  button gt  lt  a gt    We can use btn-block for automatic responsive

User · Answer

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

User · Answer

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      lt a href     class  btn btn-primary btn-responsive  gt Click Here lt  a gt

User · Answer

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

User · Answer

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

[css] How to get a responsive button in bootstrap 3

Examples related to css

Examples related to twitter-bootstrap

Examples related to button

Examples related to twitter-bootstrap-3