bootstrap 3 wrap text content within div for horizontal alignment

Question

My post title here could be misleading  first have a look at HTML i have currently    As you can see  each column s text content overflows to next column  Secondly  each of them is not horizontal aligned   eg the link for view details does not align straight   I want them to be aligned straight irrespective of length of text   Here is my HTML code   the content here is dynamically generated  so the no of items will vary   I use bootstrap 3 in my code    lt div class  row  style  box-shadow  0 0 30px black   gt           lt div class  col-6 col-sm-6 col-lg-4  gt           lt h3 gt 2005 Volkswagen Jetta 2 5 Sedan  worcester   http   www massmotorcars com   6900 lt  h3 gt           lt p gt             lt small gt 2005 volkswagen jetta 2 5 for sale has 110 000 miles powere doors power windows has  car drives excellent  comes with warranty if you amp  39 re     lt  small gt           lt  p gt           lt p gt             lt a class  btn btn-default  href   search 1355 detail   role  button  gt View details  amp raquo  lt  a gt             lt button type  button  class  btn bookmark  id  1355   gt               lt span class                     glyphicon glyphicon-star-empty   gt  lt  span gt             lt  button gt           lt  p gt          lt  div gt         lt  -- span-- gt         lt div class  col-6 col-sm-6 col-lg-4  gt           lt h3 gt 2006 Honda Civic EX Sedan  Worcester www massmotorcars com   7950 lt  h3 gt           lt p gt             lt small gt 2006 honda civic ex has 110 176 miles  has power doors  power windows sun roof alloy wheels runs great  cd player  4 cylinder engen      lt  small gt           lt  p gt           lt p gt             lt a class  btn btn-default  href   search 1356 detail   role  button  gt View details  amp raquo  lt  a gt             lt button type  button  class  btn bookmark  id  1356   gt               lt span class                     glyphicon glyphicon-star-empty   gt  lt  span gt             lt  button gt           lt  p gt          lt  div gt         lt  -- span-- gt         lt div class  col-6 col-sm-6 col-lg-4  gt           lt h3 gt 2004 Honda Civic LX Sedan   worcester www massmotorcars com   5900 lt  h3 gt           lt p gt             lt small gt 2004 honda civic lx sedan has 134 000 miles  great looking car  interior and exterior looks nice has cd player  power windows     lt  small gt           lt  p gt           lt p gt             lt a class  btn btn-default  href   search 1357 detail   role  button  gt View details  amp raquo  lt  a gt             lt button type  button  class  btn bookmark  id  1357   gt               lt span class                     glyphicon glyphicon-star-empty   gt  lt  span gt             lt  button gt           lt  p gt          lt  div gt   lt  div gt

User · Answer

1  Maybe oveflow  hidden  will do the trick   2  You need to set the size of each div with the text and button so that each of these divs have the same height  Then for your button   button     position  absolute    bottom  0

User · Answer

Your code is working fine using bootatrap v3 3 7  but you can use word-break  break-word  if it s not working at your end    which would then look like this -     x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  x000D          integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D       lt div class  row  style  box-shadow  0 0 30px black   gt  x000D           lt div class  col-6 col-sm-6 col-lg-4  gt  x000D               lt h3 style  word-break  break-word   gt 2005 Volkswagen Jetta 2 5 Sedan  worcester http   www massmotorcars com  x000D                   6900 lt  h3 gt  x000D               lt p gt  x000D                   lt small gt 2005 volkswagen jetta 2 5 for sale has 110 000 miles powere doors power windows has  car drives x000D                      excellent  comes with warranty if you amp  39 re     lt  small gt  x000D               lt  p gt  x000D               lt p gt  x000D                   lt a class  btn btn-default  href   search 1355 detail   role  button  gt View details  amp raquo  lt  a gt  x000D                   lt button type  button  class  btn bookmark  id  1355  gt  x000D                       lt span class   x000D                        glyphicon glyphicon-star-empty   gt  lt  span gt  x000D                   lt  button gt  x000D               lt  p gt  x000D           lt  div gt  x000D           lt  -- span-- gt  x000D           lt div class  col-6 col-sm-6 col-lg-4  gt  x000D               lt h3 style  word-break  break-word   gt 2006 Honda Civic EX Sedan  Worcester www massmotorcars com   7950 lt  h3 gt  x000D               lt p gt  x000D                   lt small gt 2006 honda civic ex has 110 176 miles  has power doors  power windows sun roof alloy wheels runs x000D                      great  cd player  4 cylinder engen      lt  small gt  x000D               lt  p gt  x000D               lt p gt  x000D                   lt a class  btn btn-default  href   search 1356 detail   role  button  gt View details  amp raquo  lt  a gt  x000D                   lt button type  button  class  btn bookmark  id  1356  gt  x000D                       lt span class   x000D                        glyphicon glyphicon-star-empty   gt  lt  span gt  x000D                   lt  button gt  x000D               lt  p gt  x000D   x000D           lt  div gt  x000D           lt  -- span-- gt  x000D           lt div class  col-6 col-sm-6 col-lg-4  gt  x000D               lt h3 style  word-break  break-word   gt 2004 Honda Civic LX Sedan  worcester www massmotorcars com   5900 lt  h3 gt  x000D               lt p gt  x000D                   lt small gt 2004 honda civic lx sedan has 134 000 miles  great looking car  interior and exterior looks x000D                      nice has x000D                      cd player  power windows     lt  small gt  x000D               lt  p gt  x000D               lt p gt  x000D                   lt a class  btn btn-default  href   search 1357 detail   role  button  gt View details  amp raquo  lt  a gt  x000D                   lt button type  button  class  btn bookmark  id  1357  gt  x000D                       lt span class   x000D                        glyphicon glyphicon-star-empty   gt  lt  span gt  x000D                   lt  button gt  x000D               lt  p gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Add the following style to your h3 elements   word-wrap  break-word    This will cause the long URLs in them to wrap  The default setting for word-wrap is normal  which will wrap only at a limited set of split tokens  e g  whitespaces  hyphens   which are not present in a URL

User · Answer

Now Update word-wrap is replace by    overflow-wrap break-word    Compatible old navigator and css 3 it s good alternative    it s evolution of word-wrap   since 2012       See more information   https   www w3 org TR css-text-3  overflow-wrap  See compatibility full   http   caniuse com  search overflow-wrap

[html] bootstrap 3 wrap text content within div for horizontal alignment

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to django-templates

Examples related to twitter-bootstrap-3