Adjust <p> width on bootstrap

Question

Hello friends I have a problem with bootstrap and the <p> tag. When I add some big text in the <p> tag, it doesn't adjust to the 6 column that I define, it stays continuous to the right of the page taking up all space.

How could I make the text within the <p> tag always take the first 6 colums?

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class='container'>
<div class='row'>
<div class='col-sm-6'>
    <h2 class='text'>text</h2>
    <hr>
    <h4 class='text-warning'>Title</h4>
    <p>text content</p>
</div>

Answer 1

Just add this as a custom style and it'll wrap at your defined column size.

p{
    word-wrap: break-word;
}

Check it out here.