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

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_

<html>_x000D_
_x000D_
<head>_x000D_
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"_x000D_
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
    <div class="row" style="box-shadow: 0 0 30px black;">_x000D_
        <div class="col-6 col-sm-6 col-lg-4">_x000D_
            <h3 style="word-break: break-word;">2005 Volkswagen Jetta 2.5 Sedan (worcester http://www.massmotorcars.com)_x000D_
                $6900</h3>_x000D_
            <p>_x000D_
                <small>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&#39;re ...</small>_x000D_
            </p>_x000D_
            <p>_x000D_
                <a class="btn btn-default" href="/search/1355/detail/" role="button">View details &raquo;</a>_x000D_
                <button type="button" class="btn bookmark" id="1355">_x000D_
                    <span class="_x000D_
                      glyphicon glyphicon-star-empty "></span>_x000D_
                </button>_x000D_
            </p>_x000D_
        </div>_x000D_
        <!--/span-->_x000D_
        <div class="col-6 col-sm-6 col-lg-4">_x000D_
            <h3 style="word-break: break-word;">2006 Honda Civic EX Sedan (Worcester www.massmotorcars.com) $7950</h3>_x000D_
            <p>_x000D_
                <small>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, ...</small>_x000D_
            </p>_x000D_
            <p>_x000D_
                <a class="btn btn-default" href="/search/1356/detail/" role="button">View details &raquo;</a>_x000D_
                <button type="button" class="btn bookmark" id="1356">_x000D_
                    <span class="_x000D_
                      glyphicon glyphicon-star-empty "></span>_x000D_
                </button>_x000D_
            </p>_x000D_
_x000D_
        </div>_x000D_
        <!--/span-->_x000D_
        <div class="col-6 col-sm-6 col-lg-4">_x000D_
            <h3 style="word-break: break-word;">2004 Honda Civic LX Sedan (worcester www.massmotorcars.com) $5900</h3>_x000D_
            <p>_x000D_
                <small>2004 honda civic lx sedan has 134,000 miles, great looking car, interior and exterior looks_x000D_
                    nice,has_x000D_
                    cd player, power windows ...</small>_x000D_
            </p>_x000D_
            <p>_x000D_
                <a class="btn btn-default" href="/search/1357/detail/" role="button">View details &raquo;</a>_x000D_
                <button type="button" class="btn bookmark" id="1357">_x000D_
                    <span class="_x000D_
                      glyphicon glyphicon-star-empty "></span>_x000D_
                </button>_x000D_
            </p>_x000D_
        </div>_x000D_
    </div>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

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

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