How to span a column two rows in Bootstrap 4

Question

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:

And, on mobile it would look like this:

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

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.

it looks like it work as charm:https://jsfiddle.net/ev1odLjh/ — לבני מלכה, Dec 17 '18 at 08:07
How the results of second image is possible by using the code provided? Do you want to place col 2 above col 1? — Aditi, Dec 17 '18 at 08:08
How about applying custom grid layout and media queries just for that top part? — Ludovit Mydla, Dec 17 '18 at 08:09
@Aditi sorry, I messed up the order in the photo, I fixed it to show actual the representation. — Khaled, Dec 17 '18 at 08:18
@לבנימלכה The placement of the logo is on top of both navigation in that way, since Col2 and Col3 are in a separate "row", Col1 cannot be placed in between them in mobile. — Khaled, Dec 17 '18 at 08:21

Ludovit Mydla · Accepted Answer · 2018-12-17T08:25:21.703

2

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>

edited Dec 17 '18 at 08:25

answered Dec 17 '18 at 08:20

Ludovit Mydla

802
9
17

Was hoping for something within bootstrap itself as it would be neat, for odd reasons I am still skeptical of Grid _it's too good to be true_.. I'll give it a shot, as the only other choice is `float`. Thanks! – Khaled Dec 17 '18 at 08:52

How to span a column two rows in Bootstrap 4

1 Answers1