bootstrap-5bootstrap-grid

Bootstrap v5 Grid is not working in "col-lg" case

I am learning bootstrap, and I am seeing a course focused on Bootstrap 4. I am not sure if the following has to do with that, but I am not able to go through this exercise.

I am making this grid for a large screen size:

Example at largest screen

And when reducing the screen size to medium, the grid should now look like:

Example at medium screen

Finally, the screen should look like this in shorter screen size than medium:

enter image description here

I have tried the following code but I am not successful in the largest size:

<!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">
    <style>
        div[class^="col"] {
            height: 100px;
            background: #fdca6d;
            border: 1px solid white;
        }
    </style>
    <title>Grid challenge 2</title>
  </head>
  <body>
    <div class="container mt-4">
        <!--Start first row-->
        <div class="row">
            <div class="col-6 col-md-3">
                Row 1 / Col 1
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 2
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 3
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 4
            </div>
        </div>
        <!--End first row-->
        <!--Start second row-->
        <div class="row">
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 1
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 2
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 3
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 4
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 5
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 6
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 7
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 8
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 9
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 10
            </div>
        </div>
        <!--End second row-->
    </div>

    <!--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>
  </body>
</html>

This is how it looks like for me:

enter image description here

Solution

  • Bootstrap 5.1 (update Aug 2021)

    Bootstrap 5.1 has been released and the bug with auto-layout and sized columns has been fixed. Therefore, combining auto-layout columns with sized grid columns should now work as expected.

    Here you can see mix and match columns working as expected

    Bootstrap 5.0.2

    This is a bug that was introduced in Bootstrap 5.0.2. This is because the generated CSS order of the auto-layout columns col-{bp} were reversed with order of the sized columns col-{bp}-{width}. In your case this is making the col-md-6 override the col-lg.

    Not working in 5.0.2

    Working in 5.0.1

    As you can see in the Github thread https://github.com/twbs/bootstrap/issues/34335 there's a proposed fix for the next 5.1.x release.