Flex-box layout 3 stacked column on left, 1 on right

Question

I would like to use flexbox with bootstrap 4 to create a layout with 3 stacked columns on left, and 1 column on the right with the same vertical height as the 3 on the left. After that some rows that are full span.

Ideally this should be able to be done with native bootstrap 4 classes (different to this question)

Layout like this:

I have made a crude start here : http://jsfiddle.net/bigalnz/9xLgvnc5/14/

<div class="container">
    <div class="flex-column">
        <div>1</div>
        <div>2</div>
        <div>3</div>
     </div>
</div>

I have a jsfiddle start here.

But beyond this - what element should set the width? Should the large box have its own container? The row full span rows, should they be in there own container? Why is flex better that just nested rows/columns like this fiddle (which isn't quite right anyway as the large right box is not full height)?

score 1 · Answer 1 · answered Dec 05 '19 at 04:57

#flex_box1 div
{
  width:100%;
  height:150px;
  border: 2px solid #555;
  margin-bottom:15px;  
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
  width:100%;
  height:100%;
  border: 2px solid #555; 
}
#flex_box3 div
{
  width:100%;
  height:50px;
  border: 2px solid #555;
  margin-top:15px;  
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-3 d-flex flex-column" id="flex_box1">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="col-9 " id="flex_box2">
          <div></div>
        </div>
        <div class="col-12" id="flex_box3"><div></div></div>
        <div class="col-12" id="flex_box3"> <div></div></div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

try this,i have using bootstrap grid and flexbox with responsive — Nethra, Dec 05 '19 at 04:58
see this link on codepen: https://codepen.io/NethraDayalan/pen/NWPqRdG?editors=0100 — Nethra, Dec 05 '19 at 05:38
so you must write your own css - not possible just with native BS4? — Al Grant, Dec 05 '19 at 09:38

score -3 · Answer 2 · edited Dec 08 '20 at 10:30

-3

<div class="d-flex flex-column">
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
</div>
    <div class="d-flex flex-column-reverse">
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
</div>

Look at the docs here.

edited Dec 08 '20 at 10:30

Mohnish

1,010
1
12
20

answered Dec 04 '19 at 21:59

Abdulkadir Aslan

11
5

Link is broken unfortunately – Dan Dec 04 '19 at 23:31

Flex-box layout 3 stacked column on left, 1 on right

2 Answers2