0

I am learning Bootstrap 5 and trying to create a 3 column layout. Column1 should be shorter than the other columns because that will be my menu. I used colors to seperate the columns and I want the second row column 1 to have a height of 150px. This is not happening. when the page loads the columns are of equal heights which is wrong. How do I fix this?

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

            <!-- Bootstrap CSS -->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

            <title>Hello, world!</title>
            
            <style>
                body {background-color: powderblue;}
                
                .my-first-col {
                    min-height: 50vh;
                }

                .my-second-col {
                    min-height: 750px;
                }
                </style>
          </head>
          <body>
            
            <div class="container">
                <div class="row">
                    <div class="col-3 border bg-primary">First Row</div>
                </div>
                <div class="row">
                    <div class="col-2 border bg-secondary text-white my-first-col">Second row column 1</div>
                    <div class="col-7 border bg-primary my-second-col">Second row column 2</div>
                    <div class="col-3 border bg-warning">Second row column 3</div>
                </div>
                <div class="row border bg-info">
                    <div>Here is my footer</div>
                </div>

            </div>

            <!-- Optional JavaScript; choose one of the two! -->

            <!-- Option 1: Bootstrap Bundle with Popper -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

            <!-- Option 2: Separate Popper and Bootstrap JS -->
            <!--
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
            -->
          </body>
        </html>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Baba
  • 2,059
  • 8
  • 48
  • 81
  • Just for others to know. There is nothing like min-height: 5ovh. I changed that css to height: 150px and everything works fine. – Baba Jul 27 '21 at 03:29
  • Flexbox columns are always the same height – Carol Skelly Jul 27 '21 at 11:39
  • Does this answer your question? [Is there a way of get "real" floating with flexbox and bootstrap 4 with unequal high elements?](https://stackoverflow.com/questions/55411552/is-there-a-way-of-get-real-floating-with-flexbox-and-bootstrap-4-with-unequal) – Carol Skelly Jul 27 '21 at 11:44

0 Answers0