bootstrap grid col overflowing : <p>I am starting to learn Bootstrap, I could not understand this behaviour.</p>

<p>Text of a <code>.col</code> element inside a <code>.row</code> is overflowing to enter next <code>col</code> why is it happening and What can i do to wrap the text up.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;


&lt;h1&gt;Heading&lt;/h1&gt;
&lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;
    HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHel

  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;
    man
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
