bootstrap align rows in different columns

Question

With the below layout:

Green: row
Purple: column
Blue, Orange, Gray: a row respectively

The green can stack on smaller screens. How can I achieve this layout? Currently I don't have the greens so I can't stack but I can align those blue, orange and gray rows.

    <div class="row blue">
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
   </div>
   <div class="row orange">
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
   </div>
   <div class="row gray">
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
   </div>

EDIT: The blues and oranges have varied heights.

Aniketh Malyala · Answer 1 · 2021-07-28T06:35:18.600

Does this code help? (Ignore the "jkd", they are placeholders I used to give a height, you can replace them with any measurements you need)

<body>
<div class = "container">
    <div class = "row" id = "green-row"  style = "border:3px solid green;"> 
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>
        </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
    </div>
</div>
<style>
    #purple-row{
        transform: translateX(50%);
    }
</style>

You can also add this chunk of code to make all the elements the same height:

        <script>
        var all = document.getElementsByName("purple-row");
        // alert(all.length)
        maxHeight = 0
        for (var i=0, max=all.length; i < max; i++) {
            // alert(all[i].style.borderColor)
            if(all[i].offsetHeight > maxHeight){
                maxHeight = all[i].offsetHeight;
            }
        }
        alert(maxHeight)
        for (var i=0, max=all.length; i < max; i++) {
            all[i].style.height = maxHeight + "px";
        }

    </script>

Thanks for you code but once the height in some blues and oranges grows, the alignment is out of whack. — Antediluvian, Jul 28 '21 at 06:14
Thank you for your edit. But I would like to avoid JS as possible as I can. — Antediluvian, Jul 28 '21 at 06:41

bootstrap align rows in different columns

1 Answers1