Bootstrap Responsive Columns Height

Question

I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.

When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?

<div class="container-fluid">
    <div class="row pt-5 pl-3 pr-3">
        <div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
            ...
        </div>
        <div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
            ...
        </div>
        <div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
            ...
        </div>
    </div>

    <section id="footer" class="footer">
        <div class="container">
            <div class="row">
            </div>
        </div>
    </div>
</div>

Carol Skelly · Accepted Answer · 2022-01-08 17:56:41Z

2

Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).

You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.

<div class="container-fluid">
  <div class="row pt-5 d-md-block d-xl-flex">
    <div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
      left
    </div>
    <div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
      main
    </div>
    <div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
      right
    </div>
  </div>
</div>

Demo: https://www.codeply.com/go/A0oYUlPOud

Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space

edited Jan 8, 2022 at 17:56

answered Sep 4, 2018 at 15:56

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jcaruso Over a year ago

perfect! That did what i wanted it to but led to another problem, the main goes over my footer now. See the updated layout. Can I keep that from happening now?

jcaruso Over a year ago

Look at this, when the right moves to the bottom the links are no longer clickable. codeply.com/go/hrk3lw2LHR

Collectives™ on Stack Overflow

Bootstrap Responsive Columns Height

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related