Search code examples
cssbootstrap-4bootstrap-grid

How to span a column two rows in Bootstrap 4

Though this question has been asked a lot before, all answers suggestion that to span a column, place the other columns into an inner row, like so:

<div class="row">
  <div class="col-12 col-md-4">logo</div>
  <div class="col-12 col-md-8">
    <div class="row">
      <div class="col-12">top nav</div>
      <div class="col-12">bottom nav</div>
    </div>
  </div>
</div>

The result would look like so on a desktop: enter image description here

And, on mobile it would look like this: enter image description here

However, the required result would be to place the logo between the two navigation, like below: enter image description here

My best bet so far, is two place two logos, then hide and show them at different viewport sizes. Which works, but isn't really a neat solution.

Solution

  • Using custom grid layout is my first suggestion. (Or maybe bootstrap has some shortcuts to that, but I don't know of them) You can play with order-X classes of bootstrap. But that will not help you to get logo div, in between nav divs in different wrapper

    .special {
  display: grid;
}

div {border: 1px solid grey;}

/* for tablets and desktops*/
@media screen and (min-width: 600px) {
  .special {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 50px 50px;
  }
  
  .logo {grid-area: 1/1/3/2;}

}
    <div class="special">
  <div class="topNav">top nav</div>
  <div class="logo">logo</div>
  <div class="bottomNav">bottom nav</div>
</div>