Bootstrap grid problems (overlapping divs)

Question

I know that this question is already answered but I really don't get where I'm wrong.

I have a grid with this structure:

<div class="row">
    <div class="row">
        <div class="left_content col-lg-8 col-sm-12">
            <div class="row">
                <div class="news_report col-lg-6 col-sm-6">

                </div>

                <div class="news_report col-lg-6 col-sm-6">

                </div>
            </div>

            <div class="row">
                <div class="recursos_container col-xs-6">

                </div>

                <div class="more_info_container col-xs-6">
                    <div class="alerts_container">

                    </div>

                    <div class="acces_to_catalog_container">

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

            <div class="row">
                <div class="app_info_container col-xs-12">
                    <div class="app_left_content">

                    </div>

                    <div class="app_right_content">

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

    <div class="row">
        <div class="right_content col-lg-4 col-sm-12">
            <div class="row">
                <div class="twitter_container">
                    <div class="twitter_header">

                    </div>

                    <div class="twitter_content">

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

            <div class="row">
                <div class="blog_container">
                    <div class="blog_side_header">

                    </div>

                    <div class="blog_side_content">
                        <div class="blog_side_post">

                        </div>

                        <div class="blog_side_post">

                        </div>

                        <div class="blog_side_post">

                        </div>

                        <div class="blog_side_post">

                        </div>
                    </div>

                    <div class="blog_side_footer">

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

The twitter container is overlapping the others divs. Do I have to make a bit of mess with the bootstrap classes?

Answer 1

Looking at your markup and your question there is not too much to say.

You're doing something like this:

<div class="row">
  <div class="row">
    <div class="left-content col-lg-8"></div>
  </div>
  <div class="row">
    <div class="right-content col-lg-4"></div>
  </div>
</div>

Which represents one row below other one. But, maybe you're looking for something like this:

<div class="row">
  <div class="left-content col-lg-8"></div>
  <div class="right-content col-lg-4"></div>
</div>

Which is one row split in two sections with different width.

Answer 2

You are wrapping a row directly under another row. Always try to keep a row under a container or a column div.

You can either change the top parent row to container like this:

<div class="container">
  <div class="row">
    <div class="left_content col-lg-8 col-sm-12">
        <div class="row">
            <div class="news_report col-lg-6 col-sm-6">

            </div>

            <div class="news_report col-lg-6 col-sm-6">

            </div>
        </div>

OR you can add a col div under the parent row like this:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="left_content col-lg-8 col-sm-12">
        <div class="row">
            <div class="news_report col-lg-6 col-sm-6">

            </div>

            <div class="news_report col-lg-6 col-sm-6">

            </div>
        </div>

Answer 3

Try following the Bootstrap documentation by using the .container > .row > column structure:

<div class="container">
    <div class="row">
        <div class="col-md-*">
        </div>
    </div>
</div>

Where the asterisk is whatever size you're trying to use. I am not sure why you have a row nested in a row nested in a row.

If you want it to be full-width, replace the .container class with .container-fluid.