Bootstrap 4 row & column stacking vertically instead of horizontally

Question

I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.

I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?

          <div class="col-lg" id="col2">
            <div class="row">
              <div class="col-lg">
                <div class="wind"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg" id="col3">
                <div class="temp"></div>
                <div class="city"></div>
              </div>
            </div>
          </div>

brian17han · Answer 1 · 2017-12-20T18:28:11.640

2

You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.

.wind,
.temp,
.city {
  height: 50px;
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-sm" id="col2">
  <div class="row">
    <div class="col-lg">
      <div class="wind"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg" id="col3">
      <div class="temp"></div>
    </div>
    <div class="col-lg" id="col3">
      <div class="city"></div>
    </div>
  </div>

edited Dec 20 '17 at 18:28

answered Dec 20 '17 at 18:08

brian17han

1,239
1
8
15

I would like there to be two rows: The first row to have the .wind div, and the second row to have .temp & .city, side-by-side. Does that makes sense? – Nick Tamburro Dec 20 '17 at 18:14
1

oh I saw esther kay added an answer, yeah, same solution. – brian17han Dec 20 '17 at 18:29

score 2 · Answer 2 · edited Jan 14 '20 at 04:33

You can rearrange your html code to this format.

        <div class="row">    
            <div class="col-lg" id="col2">
                <div class="col-lg">
                    <div class="wind"></div>
                </div>
            </div>            
            <div class="col-lg" id="col3">
                <div class="temp"></div>
                <div class="city"></div>
            </div>
        </div>

score 1 · Accepted Answer · answered Dec 20 '17 at 18:23

You should edit your code to this, making the second row have two columns.

<div class="col-lg" id="col2">
        <div class="row">
          <div class="col-lg">
            <div class="wind"></div>
          </div>
        </div>
        <div class="row">
            <div class="col temp"></div>
            <div class="col city"></div>
        </div>
      </div>

Bootstrap 4 row & column stacking vertically instead of horizontally

3 Answers3