CODEWITHSUNDEEP
twitter-bootstrap
Jerrit
Jerrit

Reputation: 149

Why does my text go outside the divs with bootstrap?

I am fiddling around with Bootstrap, and everything is going quite well. But when I make a div to put text in, the text sticks outside the div, making the page as wide as the string. Isn't bootstrap responsible for taking care of this?

Here is the relevant HTML code:

<div class="row top-buffer">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col cell">
    <div class="col-xs-12 col-md-12 col-sm-12 col-lg12 inner">
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col cell">
    <div class="col-xs-12 col-md-12 col-sm-12 col-lg12 inner">
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
  </div>
</div>

Upvotes: 2

Views: 18605

Answers (4)

Amit Nishti
Amit Nishti

Reputation: 111

Use style="word-wrap:break-word";

Upvotes: 11

celineu
celineu

Reputation: 586

Add a custom width to your div, then either add a scrollbar or hide the text (text-overflow:ellipsis).

Upvotes: 0

k-nut
k-nut

Reputation: 3575

If you want the browser to automatically break your text you should add the css word-wrap: break-word; property. To your surrounding tag (in this case the <p> tag).

Upvotes: 3

Sven Koschnicke
Sven Koschnicke

Reputation: 6711

The browser doesn't do automatic hyphenation. Put some whitespaces in your text and it should work as expected.

Upvotes: 6

Related Questions