Bootstrap grid not wrapping properly? - html

Question

I am practicing this grid system and the grid isn't wrapping properly, it overlaps each other's text as can be seen in the screenshot below:
I am using the version: 3.3.7.
Here's the code that's resulting in this error:
Code:
<div class="container">
<div class="row">
<div class="col-md-8">
<p>ROW 1</p>
</div>
<div class="col-md-4">
<p>ROW 1.1</p>
</div>
Error:
<div class="container">
<div class="row">
<div class="col-md-8">
<p>ROW 1</p>
</div>
<div class="col-md-4">
<p>ROW 1.1</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<p>ROW 2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
</div>
<div class="col-md-3">
<p>ROW 2.1 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
</div>
<div class="col-md-3">
<p>ROW 2.2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
</div>
<div class="col-md-3">
<p>ROW 2.3 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
</div>
</div>
</div>
Any help as to why it won't wrap the text properly would be great.

Answer 1

I believe this is happening because the content inside the containers is one word that is too long for the column. If you simply must have that long of a word in each container you can try applying word wrap to your paragraph tags as follows:
<style>
p {
word-wrap:break-word;
}
</style>
Hope this helps!