6

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?

3 Answers 3

14

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>
0
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.