'How to flex in bootstrap

May I know on how to flex this sidebar? I already used d-flex property but it looks like it did not worked for me. Our task should be that the sidebar must be in the left side and the two containers in the center.

Please see the links for more clearer version of what I am trying to say.

https://imgur.com/uzNzICN (trying to achieve)

Here is the demo :-

https://jsfiddle.net/atwj9rhp/

.item1, .item2{
  padding: 1.5%;
  background-color: #F4F4F4;

  .desc{
       font-family: 'Times New Roman', Times, serif;
      margin-top: auto;
      margin-bottom: auto;
      margin-left: -6%;
      margin-right: -5%;

      h4{
          font-weight: lighter;
          color: #545454;
          font-size: 1.3vw;
      }

      #size{
          font-size: 1.1vw;
      }
  }

  .variation, .quantity{
      margin-top: auto;
      margin-bottom: auto;
      font-family: 'Times New Roman', Times, serif;
      color: #737373;

      #variation-label, #quantity-label{
          font-size: 1.1vw;
          font-weight: bold;
      }

      #variation-value, #quantity-value{
          font-size: 1vw;
      }
  }

  .price-and-remove{
      margin-top: auto;
      margin-bottom: auto;
      font-family: 'Times New Roman', Times, serif;
      float: right;

      h3{
          display: inline;
          padding-right: 15%;
          font-weight: bold;
          font-size: 1.2vw;
          color: $color6;
      }
      
      a{
          color: $color6;
          font-size: 1.3vw;
      }
  }
}

.item1{
  margin-bottom: 2%;
}

.total{
  padding-top: 5%;
  width: 100%;
  text-align: right;
  font-family: 'Times New Roman', Times, serif;

  #total-item{
      font-weight: normal;
      font-size: 2vw;
      display: inline;
  }

  #price{
      margin-right: 2.25%;
      margin-left: 0.5%;
      color: $color1;
      font-size: 2vw;
      display: inline;
  }

  #btn{
      margin-right: 5%;
      display: inline;

      a{
          font-family: 'Times New Roman', Times, serif
          background-color: #B87D6F;
          color: #FFFFFF;
          text-align: center;
          text-decoration: none;
          font-size: 1.3vw;
          font-weight: lighter;
          letter-spacing: 0.1em;
          padding: 0.75% 1.5%;
      }
      
      a:hover{
          background-color: #EBE0DD;
          color: #B87D6F;
      }
  
      a:active{
          background-color: #C4B0AC;
          color: #FFFFFF;
      }
  }
  
}

.sidebar ul {
    padding-top: 2%;
    list-style: none;
    text-align: center;
    
  }
  
  .sidebar ul li a {
    text-decoration: none;
    font-family: 'Times New Roman', Times, serif;
    font-weight: lighter;
    color: #C4B0AC;
    font-size: 25px;
  }

<header class = "sidebar">
        <div class = "d-flex flex-column">
          <ul class = "my-4">
            <li><a href="#">All</a></li>
            <li><a href="#">To Pay</a></li>
            <li><a href="#">To Ship</a></li>
            <li><a href="#">To Receive</a></li>
            <li><a href="#">Completed</a></li>
            <li><a href="#">Cancelled</a></li>
          </ul>
        </div>
      </header>

    <div class="container items-content" style="width: 80%;">
        <div class="row justify-content-center item1">         
            <div class="col-sm-2 pic-and-brand justify-content-rght">
                <h3>Essentiel</h3>
                <img src="/images/essentiel-trousers.png" alt="Essentiel Trouser" style="width: 60%">
            </div>

            <div class="col-sm-4 desc">
                <h4>High Waist Wide Leg Trouser</h4>
                <h4 id="size">Free Size</h4>
            </div>
    
            <div class="col-sm-2 text-center variation">
                <h5 id="variation-label">Variation:</h5>
                <h6 id="variation-value">White</h6>
            </div>

            <div class="col-sm-1 quantity text-center">
                <h5 id="quantity-label">Quantity:</h5>
                <h6 id="quantity-value">1</h6>
            </div>
    
            <div class="col-sm-3 price-and-remove text-end">
                <h3>P310</h3>
                <a href="#remove-item">Remove from cart</a>
            </div>
        </div>
    
        <div class="row justify-content-center item2">
            <div class="col-sm-2 pic-and-brand">
                <h3>Charlotte Folk</h3>
                <img src="/images/charlotte-cropped.png" alt="Charlotte Folk 1996 Tote Bag" style="width: 60%">
            </div>

            <div class="col-sm-4 desc">
                <h4 id="name">1996 Tote Bag</h4>
            </div>

            <div class="col-sm-2 text-center variation">
                <h5 id="variation-label">Variation:</h5>
                <h6 id="variation-value">Espresso Brown</h6>
            </div>

            <div class="col-sm-1 quantity text-center">
                <h5 id="quantity-label">Quantity:</h5>
                <h6 id="quantity-value">1</h6>
            </div>
    
            <div class="col-sm-3 price-and-remove text-end">
                <h3>P620</h3>
                <a id="remove" href="#remove-item">Remove from cart</a>
            </div>
        </div>

Solution 1:^[1]

Here you go...

#sidebar {
  height: 100vh;
}

#first,
#second {
  height: 50vh;
}

#sidebar,
#first,
#second {
  border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row d-flex justify-content-around">
      <div class="col-4">
        <div id="sidebar">aaa</div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-12">
            <div id="first">bbb</div>
          </div>
          <div class="col-12">
            <div id="second">ccc</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Solution 2:^[2]

<div class="d-flex">
    <header class="sidebar">

        <ul class="my-4">
            <li><a href="#">All</a></li>
            <li><a href="#">To Pay</a></li>
            <li><a href="#">To Ship</a></li>
            <li><a href="#">To Receive</a></li>
            <li><a href="#">Completed</a></li>
            <li><a href="#">Cancelled</a></li>
        </ul>
    </header>



    <div class="container items-content" style="width: 80%;">
        <div class="row justify-content-center item1">
            <div class="col-sm-2 pic-and-brand justify-content-rght">
                <h3>Essentiel</h3>
                <img src="/images/essentiel-trousers.png" alt="Essentiel Trouser" style="width: 60%">
            </div>

            <div class="col-sm-4 desc">
                <h4>High Waist Wide Leg Trouser</h4>
                <h4 id="size">Free Size</h4>
            </div>

            <div class="col-sm-2 text-center variation">
                <h5 id="variation-label">Variation:</h5>
                <h6 id="variation-value">White</h6>
            </div>

            <div class="col-sm-1 quantity text-center">
                <h5 id="quantity-label">Quantity:</h5>
                <h6 id="quantity-value">1</h6>
            </div>

            <div class="col-sm-3 price-and-remove text-end">
                <h3>P310</h3>
                <a href="#remove-item">Remove from cart</a>
            </div>
        </div>

        <div class="row justify-content-center item2">
            <div class="col-sm-2 pic-and-brand">
                <h3>Charlotte Folk</h3>
                <img src="/images/charlotte-cropped.png" alt="Charlotte Folk 1996 Tote Bag" style="width: 60%">
            </div>

            <div class="col-sm-4 desc">
                <h4 id="name">1996 Tote Bag</h4>
            </div>

            <div class="col-sm-2 text-center variation">
                <h5 id="variation-label">Variation:</h5>
                <h6 id="variation-value">Espresso Brown</h6>
            </div>

            <div class="col-sm-1 quantity text-center">
                <h5 id="quantity-label">Quantity:</h5>
                <h6 id="quantity-value">1</h6>
            </div>

            <div class="col-sm-3 price-and-remove text-end">
                <h3>P620</h3>
                <a id="remove" href="#remove-item">Remove from cart</a>
            </div>
        </div>
    </div>
</div>

add this change to your html code. Please add d-flex class to your parent div then it works properly and remove flex-column class

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Cervus camelopardalis
Solution 2	Pinal Sukhadiya

'How to flex in bootstrap

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]