CODEWITHSUNDEEP
htmltwitter-bootstrap
StateofDK
StateofDK

Reputation: 153

Bootstrap columns stacking when they shouldn't be

I'm trying to learn bootstraps grid system. From what I understand about the grid system, the code below should produce 2 columns. One column with 3 rows on the left, and one column with 1 row on the right and they should never stack. Unfortunately, this is not the case and rather than never stacking, they are always stacked and no matter what I try, I can't get the result I want. Does anyone see any issues with this code or is it something deeper that I need to look into?

I thought it might be something to do with my display/viewport size, but http://viewportsizes.com/mine/ says my viewport size is 1707 x 961, which from what I understand should not be small enough to force the columns to stack.

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Overhead</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="col-6">
            <div class="row">
                Top Left
            </div>
            <div class="row">
                Middle Left
            </div>
            <div class="row">
                Bottom Left
            </div>
        </div>
        <div class="col-6">
            Right
        </div>
    </div>
</body>

Upvotes: 2

Views: 3219

Answers (4)

Iam Loki
Iam Loki

Reputation: 41





    <div class="row">
      <div class="col-md-6">
        Left column
      </div>

      <div class="col-md-6">
        Middle Column
      </div>

      <div class="col-md-6">
        Right Column
      </div>
    </div>

Upvotes: 0

Raa Vijay
Raa Vijay

Reputation: 75

A row has a negative margin of -15px on both side of the element. A column has a positive padding of 15px on both sides to match the negative margins created by the row. So, when you create a row, it should be immediately followed by a column.

I think you are looking for the one below.

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          Row 1 on Col 1
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          Row 2 on Col 2
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          Row 3 on Col 3
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          Row 1 on Col 2
        </div>
      </div>
    </div>
  </div>
</div>

Take a look at this pen that I have created for you. https://codepen.io/vijayrkumar/pen/JpZROy

Upvotes: 0

Abiud Orina
Abiud Orina

Reputation: 1231

You should first define rows before columns. For example the code below will create a row and 2 equal columns.

<body>
    <div class="container">    
      <div class="row">
        <div class="col-md-6">

            </div>     
        <div class="col-md-6">

        </div>
    </div>
</body>

here is the bootply fiddle link https://www.bootply.com/WtWRhCVl8e

Upvotes: 3

Anthony L
Anthony L

Reputation: 2169

Columns go into rows, you have it the other way around. For instance:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      left column 
    </div>
    <div class="col-md-6">
      right column
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      left column 
    </div>
    <div class="col-md-4">
      middle column
    </div>
    <div class="col-md-4">
      right column
    </div>
  </div>
</div>

This will create two rows, the top row with two columns, each 50% of the row, and the bottom row with three columns, each 33.33% of the row.

I hope this helps.

Upvotes: 0

Related Questions