Home Ask Login Register

Developers Planet

Your answer is one click away!

Prakhar Singh February 2016

bootstrap grid col overflowing

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>

Answers


Bubblesphere February 2016

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>

Post Status

Asked in February 2016
Viewed 2,049 times
Voted 11
Answered 1 times

Search




Leave an answer


Quote of the day: live life