CODEWITHSUNDEEP
cssbootstrap-4
RomeNYRR
RomeNYRR

Reputation: 887

Bootstrap 4 - Move Row Up Next

I've been looking at the Bootstrap docs but I can't seem to find the class that I need to make a certain effect happen. Is there a way to move/offset a div Row if the parent row has a column that pushes the bottom div down? Is this possible to achieve with bootstrap? I've attached an image of what I'm trying to accomplish along with the code.

What I'm trying to do

<div class="container">
<div class="row">
    <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
    <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
</div>
<div class="row">
    <div class="col-sm-5" style="color: white; background:blue; height: 300px; position: top">something</div>
</div>

Upvotes: 0

Views: 2844

Answers (4)

user3361996
user3361996

Reputation: 373

Not elegant, but if you want to use CSS only, you can add a negative margin-top at the sm breakpoint. This will allow for single full-width stacking for the xs.

Codepen

<div class="container">
    <div class="row">
        <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
        <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
    </div>
    <div class="row">
        <div class="col-sm-5 push-up" style="color: white; background:blue; height: 300px;">something</div>
    </div>
</div>

CSS

@media (min-width: 576px) {
    .col-sm-5.push-up {
        margin-top: -200px;
    }
}

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362700

The Bootstrap 4 .row is flexbox, so all of the col-* will be the height of the tallest column. Therefore, you need to float- the cols on sm and up...

https://www.codeply.com/go/CuWAXOF6Gs

<div class="container">
    <div class="row d-sm-block">
        <div class="col-sm-5 float-left" style="color: white; background:black; height: 100px">something</div>
        <div class="col-sm-7 float-right" style="color: white; background:red; height: 300px">something</div>
        <div class="col-sm-5 float-left" style="color: white; background:blue; height: 300px; position: top">something</div>
    </div>
</div>
  • d-sm-block makes the row display:block instead of display:flex on sm and up
  • float-left and float-right to pull the taller column to the right.

Related: Empty vertical space between columns in Bootstrap 4

Upvotes: 3

Justin R.
Justin R.

Reputation: 488

If you're using bootstrap 4, the solution you're looking for is probably the Cards component. https://getbootstrap.com/docs/4.0/components/card/#card-columns.

** I'd just throw this in a comment but I don't have enough rep yet.

Upvotes: 0

TPHughes
TPHughes

Reputation: 1627

You could sort the two in to one sm-5 col like so:

<div class="container">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 300px">something</div>
  </div>
</div>

If you want it to detect this automatically and fill any vertical gaps available then no there is no way to do that. You need to structure your cols according to your content.

If you wanted the col which is shorter to fill the vertical gap using this method then you would need to look at using flex.

https://getbootstrap.com/docs/4.1/utilities/flex/

<div class="container d-flex">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 100%">something</div>
  </div>
</div>

Upvotes: 1

Related Questions