Elevate Your Design with Bootstrap 4 - Rearrange Rows with Ease

Question

Elevate Your Design with Bootstrap 4 - Rearrange Rows with Ease

I have been browsing the Bootstrap documentation, but I am unable to locate the specific class needed to achieve a certain effect. Is there a method for shifting or offsetting a div Row if the parent row has a column that pushes down the bottom div? Can this be accomplished using Bootstrap? I have included an image illustrating what I am trying to achieve, as well as the corresponding code snippet.

https://i.stack.imgur.com/oSfDD.png

<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>

css bootstrap-4

Answer 1

Answer №1

The Bootstrap 4 grid system with the .row class utilizes flexbox, causing all col-* elements to adjust their height based on the tallest column within the row. To ensure proper alignment, it is recommended to use float- classes starting from the sm breakpoint and above.

Click here to view a live example

<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>

The d-sm-block class changes the row's display property to block instead of flex on screens larger than or equal to sm size.
Use float-left and float-right classes to align columns accordingly, especially when dealing with varying heights.

For more information on adjusting vertical spacing between columns in Bootstrap 4, check out this related discussion on Stack Overflow.

Answer 2

The Bootstrap 4 grid system with the .row class utilizes flexbox, causing all col-* elements to adjust their height based on the tallest column within the row. To ensure proper alignment, it is recommended to use float- classes starting from the sm breakpoint and above.

Click here to view a live example

<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>

The d-sm-block class changes the row's display property to block instead of flex on screens larger than or equal to sm size.
Use float-left and float-right classes to align columns accordingly, especially when dealing with varying heights.

For more information on adjusting vertical spacing between columns in Bootstrap 4, check out this related discussion on Stack Overflow.

Answer 3

Answer №2

To combine the two elements into a single sm-5 column, you can do the following:

<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 the layout to automatically adjust and fill any vertical gaps, using flex is necessary. This cannot be achieved automatically without structuring your columns based on content.

For making the shorter column fill the vertical gap, consider using flex properties. More information on using flex in Bootstrap can be found at 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>

Answer 4

To combine the two elements into a single sm-5 column, you can do the following:

<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 the layout to automatically adjust and fill any vertical gaps, using flex is necessary. This cannot be achieved automatically without structuring your columns based on content.

For making the shorter column fill the vertical gap, consider using flex properties. More information on using flex in Bootstrap can be found at 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>

Answer 5

Answer №3

Although not the most elegant solution, you can achieve the desired effect using CSS only by adding a negative margin-top at the sm breakpoint. This will ensure single full-width stacking for the xs layout.

Check out this Codepen example

<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;
    }
}

Answer 6

Although not the most elegant solution, you can achieve the desired effect using CSS only by adding a negative margin-top at the sm breakpoint. This will ensure single full-width stacking for the xs layout.

Check out this Codepen example

<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;
    }
}

Answer 7

Answer №4

Incorporating Bootstrap 4 into your project? You may find the solution you seek with the Cards component. Check out this link for more information: https://getbootstrap.com/docs/4.0/components/card/#card-columns.

** I wish I could simply leave this as a comment, but my reputation score is not high enough at the moment.

Answer 8

Incorporating Bootstrap 4 into your project? You may find the solution you seek with the Cards component. Check out this link for more information: https://getbootstrap.com/docs/4.0/components/card/#card-columns.

** I wish I could simply leave this as a comment, but my reputation score is not high enough at the moment.

Elevate Your Design with Bootstrap 4 - Rearrange Rows with Ease

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to automatically scroll to the last dynamically added div?

Customize DataTables selector by modifying its frame, font, and alignment

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

Animation of scrolling in a horizontal layout

Leveraging icons with Bootstrap 4.5

Troubleshooting Media Queries in HTML, CSS, Bootstrap: Why Aren't They Applying as Expected?

Ensuring radio button validation prior to redirecting to contact form

Customizing styles in ZK based on theme

Non-responsive behavior triggered by a button click event (JavaScript)

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

The shadow is obscured by a block that has an 'overflow: scroll' property

Tips for eliminating the flash of color upon website loading

Adding padding to the top causes the scrollbar to hide at the bottom in Firefox

Choosing "grandoffspring"

iOS now supports hardware-accelerated CSS3 transitions for seamless and

What is the best way to position the list element to align with the top of a div container?

The tooltip of the Material UI IconButton is displaying incorrectly

Styling columns to be inline-flex without taking up the full height

Creating a list of items using HTML tags should be coded in a way that fits neatly within the main container element

What is the best way to create a three-column layout that completely fills the width of a page, utilizing pixel measurements on two of the columns