CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
David
David

Reputation: 67

How to prevent bootstrap column overlapping each other

I am learning using bootstrap by making simple example where I have 3 columns which size of 2, 8 and 2. I realized that at some screen size, the content inside of the columns are overlapping each other. How can I prevent this overlapping, what I expect is no matter the size of the screen is, the page always keep 3 columns and the content inside of the columns will be going down in newline.

<div id="SummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
    <div class="mainTenant">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

<div id="main" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" role="main">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div class="col-lg-2 col-md-2 col-sm-2 rightSidebar" role="complementary" >
    <div class="container-fluid">cccccccccccccccccccccccccccccccccccccccccc</div>
</div>

Here is my jsfiddle: https://jsfiddle.net/DTcHh/17967/

Upvotes: 0

Views: 1760

Answers (3)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

use below updated code to solve issue.

div {
  word-wrap: break-word;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-container">
  <div id="mainContainer" class="container-fluid">

    <div class="row row-offcanvas row-offcanvas-left">

      <div id="SummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
        <div class="mainTenant">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
      </div>

      <div id="main" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" role="main">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>

      <div class="col-lg-2 col-md-2 col-sm-2 rightSidebar" role="complementary" >
        <div class="container-fluid">cccccccccccccccccccccccccccccccccccccccccc
        </div>
      </div>


    </div>
  </div>
</div>

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10197

try this css in container word-break:break-all

Upvotes: 0

Ivanka Todorova
Ivanka Todorova

Reputation: 10229

It's the letters that "break" the columns. This is not a real life example, because this is most likely to never happen. To have all those letters without a space or breaking point.

You can "fix" this by adding word-break: break-all;. An example.

But again this is not a real life problem.

Edit: You might find it useful to use dummy text generators like: lipsum.com. Example: here.

Upvotes: 1

Related Questions