Search code examples
bootstrap-4bootstrap-grid

Bootstrap column span 2 rows

I am using Bootstrap 4 and this is what I'm trying to achieve (a picture worth a thousand words): enter image description here

This is what I managed to achieve, by using this markup:

<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div> <!-- I want 3 to stick to the bottom of 1 -->

enter image description here

Can any bootstrap expert help me out with this one?

Solution

  • In order to get something similar to the layout you want, you would have to use nested rows and columns, so div 1 & 3 would be on a container which will use 6 columns out of the 12, like this (See in full screen):

    .col-lg-6 {
	border: 1px solid red;
	min-height: 200px;
}

.col-lg-12 {
	border: 1px solid blue;
	min-height: 200px;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6">1</div>
  <div class="col-lg-6">
    <div class="row">
      <div class="col-lg-12">2</div>
      <div class="col-lg-12">3</div>
    </div>
  </div>
</div>

    With Bootstrap you have the option to use the order-* class, which helps you (of course) order the elements in a flex-container in whichever way you want, however this will not work since basically on your first level you only have 2 elements.

    The other option you have, which actually works really well for these kind of two-dimensional layouts, is CSS Grid, which is native to CSS and can help you order your elements in any way and allow you to get the layout you need:

    .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas: 
            "g2 g1"
            "g2 g3"
}

.grid-vertical {
  grid-template-columns: 30%;
  grid-template-areas: 
            "g1"
            "g2"
            "g2"
            "g3"
}

.grid-item {
  border: 1px solid #000;
}

.g1 {
  grid-area: g1;
}

.g2 {
  grid-area: g2
}

.g3 {
  grid-area: g3
}
    <div class="grid">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

<div class="grid grid-vertical">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

    You can get more information about CSS Grid here. You can also read more on Flexbox (which Bootstrap 4 is based on) here so you have more ways to manipulate Bootstrap's components