CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout
nalzok
nalzok

Reputation: 16107

Text exceeding grid in bootstrap3

As you can see, "11111111..." and "22222222..." are overlapping. I think this is because the former exceeds the grid it belongs to, i.e. <div class="col-xs-6 col-lg-4">.

<!DOCTYPE html>
<html>

<head>
  <title>
    Test
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-lg-4">
        <h2>11111111111111111111111111111111</h2>
      </div>
      <div class="col-xs-6 col-lg-4">
        <h2>22222222222222222222222222222222</h2>
      </div>
    </div>
  </div>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

It looks like this in my browser(Safari Version 9.1.2 (11601.7.7)):

enter image description here

What am I doing wrong?

Upvotes: 0

Views: 793

Answers (1)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Add word-wrap: break-word; to h2 element. because the default setting for word-wrap is normal. which wrap only for limited set of split tokens (example: whitespaces, hyphens).

HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-lg-4">
      <h2 class="w-wrap">11111111111111111111111111111111</h2>
      <p class="text-muted ">11111111111111111111111111111111</p>
    </div>
    <div class="col-xs-6 col-lg-4">
      <h2 class="w-wrap">22222222222222222222222222222222</h2>
      <p class="text-muted">22222222222222222222222222222222</p>
    </div>
  </div>
</div>

CSS:

.w-wrap{
  word-wrap: break-word;
}

Upvotes: 3

Related Questions