Bootstrap grid problems (overlapping divs)
19,651
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>
Author by
Silvio Zoidberg Sdord
Updated on August 14, 2022Comments
-
Silvio Zoidberg Sdord over 1 year
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?