bootstrap grid col overflowing

Question

I am starting to learn Bootstrap, I could not understand this behaviour.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<h1>Heading</h1>
<div class="row">
  <div class="col-md-6">
    HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHel

  </div>
  <div class="col-md-6">
    man
  </div>
</div>

This is normal word wrapping in HTML (not Bootstrap specific). That is 1 big word so the browser won't wrap it. If the text had any white space then it would wrap on white space. — CodingWithSpike, Feb 06 '16 at 21:57

Bubblesphere · Accepted Answer · 2016-02-06T21:45:06.003

The word inside your div is displayed to its full length to conserve the integrity of the word. In order to wrap the word on a new line if it reaches the end of your div, use a CSS property called word-wrap on the container.

You can also use -ms-word-break: break-all;word-break: break-all; depending on the behavior you prefer

<h1>Heading</h1>
<div class="row">
  <div class="col-md-6" style="word-wrap: break-word;">
    HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHel

  </div>
  <div class="col-md-6" style="word-wrap: break-word;">
    man
  </div>
</div>

bootstrap grid col overflowing

1 Answers1