CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Simon Carlson
Simon Carlson

Reputation: 1989

Lining up bootstrap columns

I have a menu and an area that will contain text. My goal is to align the left edge of the word "Two" in the menu with the word "Four" in the text area. I thought using bootstrap and column offsets it would be easy, but it doesn't quite line up. I don't understand why, shouldn't the column classes and their offset counterparts have the same amount of margin and padding?

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">One</div>
            <div class="col-xs-2">Two</div>
            <div class="col-xs-2">Three</div>
        </div>
        <div class="row">
            <div class="col-xs-offset-1 col-xs-10">
                <div class="col-xs-offset-1 col-xs-1">
                    Four
                </div>
            </div>
        </div>
</div>

Upvotes: 1

Views: 870

Answers (3)

Arun
Arun

Reputation: 21

There is an extra div in text area (2nd div with class row). Please remove that and use col-xs-offset-2

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">One</div>
        <div class="col-xs-2">Two</div>
        <div class="col-xs-2">Three</div>
    </div>
    <div class="row">

            <div class="col-xs-offset-2 col-xs-1">
                Four
            </div>

    </div>

Upvotes: 0

neophyte
neophyte

Reputation: 6626

If you want to align it with two with four then just wrap four inside one div with class <div class="col-xs-offset-2 col-xs-1"> 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
       
       </head>
       <body>
       
     

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">One</div>
            <div class="col-xs-2">Two</div>
            <div class="col-xs-2">Three</div>
        </div>
        <div class="row">
            
                <div class="col-xs-offset-2 col-xs-1">
                    Four
               
            </div>
        </div>
</div>
</body>
</html>

Upvotes: 2

tao
tao

Reputation: 90068

By default, .col-*-* classes have padding: 0 15px;, that pairs up with .rows margin: 0 -15px. So you will need to provide another .row as parent for the second level of .col-*-*s:

<div class="row">
  <div class="col-xs-offset-1 col-xs-10">
     <div class="row">
        <div class="col-xs-offset-1 col-xs-1">
          Four
        </div>
     </div>
  </div>
</div>

Please notice that the nested .col-*-*s inside .col-xs-10 will have their width relative to their parent and will not be equal with the ones one level up.

Upvotes: 1

Related Questions