CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4twitter-bootstrap-4
Boris K
Boris K

Reputation: 3580

Bootstrap 4 columns are stacking vertically instead of horizontally

I've got a Bootstrap container which has a row composed of two columns.

The column on the right holds an image, and should disappear at screen sizes below medium. At medium screen sizes and above, it should take 7 grid columns. The column on the left should take all 12 columns of the grid at screen sizes below medium, and take 5 columns at other sizes.

Unfortunately, I'm seeing something different-the two columns stack vertically, and the right column does not disappear at smaller screen sizes. What am I doing wrong?

(please disregard the use of "className" instead of "class," this is a React project, that's the React convention.)

<div className="container-fluid h-100 w-100">
    <div className="row d-flex flex-row justify-content-around align-items-center h-100">
        <div className="col-xs-12 col-md-5 d-flex align-items-center justify-content-around h-100 float-right">
            <div className="jumbotron">
                <h6 className="display-6">Sorry to see you go!</h6>
            </div>
        </div>
        <div className="backdrop col-md-7 d-none d-md-inline d-lg-inline d-xl-inline d-flex justify-content-around align-items-center h-100" />
    </div>
</div>

Upvotes: 0

Views: 2615

Answers (1)

dferenc
dferenc

Reputation: 8126

To my understanding, you are trying to achieve something like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
        <div class="d-flex flex-row align-items-stretch">
            <div class="col-md-5">
                <div class="jumbotron m-0">
                    <h6 class="display-6 m-0">Sorry to see you go!</h6>
                </div>
            </div>

            <div class="backdrop d-none d-md-flex col-md-7 align-items-center" style="background-color: rgba(255,0,0,.1);">
                [.backdrop]
            </div>
        </div>
    </div>

Please note, that I've renamed the className attributes to the standard class in order to have a working example.

A couple of notes:

  • Bootstrap display utility classes are working from the breakpoint and up. For example .d-md-block will have its effect in md, lg and xl sizes too. So it's not necessary to write the all.
  • I've removed bottom margins from .jumbotron and .display-6 by adding the .m-0 class in order to allow better vertical alignment.
  • .h-100 classes were removed, as .align-items-stretch is stretching the boxes to take up available vertical space.

For sure, the exact implementation depends on a couple of other things as well, but this might make things clearer.

Upvotes: 1

Related Questions