CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Jon Diamond
Jon Diamond

Reputation: 210

Bootstrap Grid Left Margin Not Aligning

I'm not sure if this is a bootstrap bug or I am just not understanding the grid system. I would like the two headers (This Guy, That Guy) to align:

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        
        <div class="row">
          <div class="col-md-6">
          
            <div class="row">
              <div class="col-md-10 col-md-offset-1">
                <h3>This Guy</h3>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        
        <div class="row">
          <div class="col-md-12">
          
            <div class="row">
              <div class="col-md-10 col-md-offset-1">
                <h3>That Guy</h3>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

I've been playing around with the grid system and in the bottom panel and column widths 1-7 all align the left margins but 9+ column width has a different left alignment.

So my question: Is there a way to align the contents of 6 and 12 column width rows in different panels using Bootstrap 3?

This is what Happens and it Looks Ratchet.

Upvotes: 0

Views: 1308

Answers (1)

hungerstar
hungerstar

Reputation: 21685

I think you're going to have to make your own offset class to make this work.

Every time you start a new row your starting a new column context of 12 columns. Your This Guy text is a 10 wide column offset by 1 inside of a 6 wide column. Your That Guy text is also a 10 wide column offset by 1 but it is inside of a 12 wide column. Bootstrap uses percentages so the size of .col-md-offset-1 will be different since the containers that .col-md-10 .col-md-offset-1 are in are different sizes.

Solution: create your own offset class, something like .col-md-offset-0-5.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

@media ( min-width: 992px ) {
  .col-md-offset-0-5 {
    margin-left: 4.1666666%;
  }
}
<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        
        <div class="row">
          <div class="col-md-6">
          
            <div class="row">
              <div class="col-md-10 col-md-offset-1">
                <h3>This Guy</h3>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-body">
        
        <div class="row">
          <div class="col-md-12">
          
            <div class="row">
              <div class="col-md-10 col-md-offset-0-5">
                <h3>That Guy</h3>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions