Twitter Bootstrap Button Text Word Wrap

Question

For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines  they appearing like so   I cannot post images  so this is what it is doing      This is the bu  tton text  I would like it to appear like   This is the     button text     lt div class  col-lg-3  gt   lt  -- FIRST COL -- gt     lt div class  panel panel-default  gt       lt div class  panel-body  gt        lt h4 gt Posted on lt  h4 gt       lt p gt 22nd September 2013 lt  p gt       lt h4 gt Tags lt  h4 gt       lt a href     class  btn btn-primary btn-xs col-lg-12  style  margin-bottom 4px   gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt      lt a href     class  btn btn-primary btn-xs col-lg-12  style  margin-bottom 4px   gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt      lt a href     class  btn btn-primary btn-xs col-lg-12  style  margin-bottom 4px   gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt              lt  div gt     lt  div gt   lt  div gt    Any help would be much appreciated   Edit  I have tried adding word-wrap break-word  but it is not making any difference   Edit  JSFiddle http   jsfiddle net TTKtb  - You will need it expand the right column so the panels sit next to one another

User · Answer

You can simply add this class     btn       white-space normal  important      word-wrap  break-word

User · Answer

FWIW  in Boostrap 4 4  you can add  text-wrap style to things like buttons       lt a href     class  btn btn-primary text-wrap  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt    https   getbootstrap com docs 4 4 utilities text  text-wrapping-and-overflow

User · Answer

Try this  add white-space  normal  to the style definition of the Bootstrap Button or you can replace the code you displayed with the one below   lt div class  col-lg-3  gt   lt  -- FIRST COL -- gt     lt div class  panel panel-default  gt       lt div class  panel-body  gt        lt h4 gt Posted on lt  h4 gt       lt p gt 22nd September 2013 lt  p gt       lt h4 gt Tags lt  h4 gt       lt a href     class  btn btn-primary btn-xs col-lg-12  style  margin-bottom 4px white-space  normal   gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt      lt a href     class  btn btn-primary btn-xs col-lg-12  style  margin-bottom 4px white-space  normal   gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt      lt a href     class  btn btn-primary btn-xs col-lg-12  style  margin-bottom 4px white-space  normal   gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  a gt              lt  div gt     lt  div gt   lt  div gt    I have updated your fiddle here to show how it comes out

User · Answer

You can add these style s and it works just as expected    btn       white-space normal  important       word-wrap  break-word       word-break  normal

[html] Twitter Bootstrap Button Text Word Wrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to web