-1

My bootstrap rows have negative margin and it is messing up my page (I can scroll horizontally which shouldn't happen). Do bootstrap rows always need to have a container as their parent? How do I stop this problem? I run into it a lot.

How would I format this properly?

<div class="container">
    <div class="row">
        <div class="col-md-8">
             <div class="row row-one">
                 ...stuff...
             </div>
             <div class="row row-two">
                 ...stuff...
             </div>
        </div>
        <div class="col-md-4>
            ...stuff...
        </div>
    </div>
</div>

Would it be?

<div class="container">
    <div class="row">
        <div class="col-md-8">
             <div class="container"> ** CONTAINER HERE? **
                 <div class="row row-one">
                     ...stuff...
                 </div>
                 <div class="row row-two">
                     ...stuff...
                 </div>
             </div>
        </div>
        <div class="col-md-4>
            ...stuff...
        </div>
    </div>
</div>
georgej
  • 3,041
  • 6
  • 24
  • 46
  • 4
    "Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding." http://getbootstrap.com/css/#grid – Paul Abbott Jan 09 '17 at 19:58
  • 1
    Bootstrap's default "row" class has 15px of negative padding in left and right where "container" class has 15px padding at the both sides which evens it out. So you should always use "continer" as the parent of "row" class in bootstrap to get rid of this horizontal scrolling problem. – Mamun Morshed Jan 09 '17 at 20:01
  • 1
    Bootstrap's default "row" class has 15px of negative "margin". Error in my previous comment where I stated it has negative "padding". – Mamun Morshed Jan 09 '17 at 21:10

2 Answers2

1

Generally bootstrap row always have -15px margin and container have 15px padding along both left and right side. If you use container and row then the sum of this will be zero and you will get rid of this kind of problem. Read grid system from bootstrap documentation.

R.H.Prem
  • 165
  • 1
  • 2
  • 11
0

I think you should read this Documentation from that you can get a clear idea how the boostrap layout works. There is way to use boostrap frame work, to get good out come you have to use certain css in the way they have mention.

PMArtz
  • 148
  • 9