Align Bootstrap rows within separate columns

Following is the layout breakdown:

  1. Green: row
  2. Purple: column
  3. Blue, Orange, Gray: a row respectively

The green rows can stack on smaller screens. How do I achieve this layout? Currently, the greens are not available to stack, but I can align the blue, orange, and gray rows.

https://i.sstatic.net/2Ry5m.png

https://i.sstatic.net/nkqkm.png

    <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 height of the blue and orange rows may vary.

cssbootstrap-4

Answer №1

Is this snippet helpful? (Please disregard the placeholders "jkd" used for height, feel free to replace them with actual measurements)

<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 = &...
    </div>
</div>
<style>
    #purple-row{
        transform: translateX(50%);
    }
</style>

If you want all elements to have the same height, you can include this code:

        <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Morris bar adjusts size when printing

I'm facing an issue with printing my Morris bar chart results. Everything looks fine in HTML, but when I try to print it, the layout seems off. Here is what I have tried so far: <script> function myFunction() { window.print(); } </script ...

javascriptcssprintingmorris.js

Ways to incorporate a while loop into a randomizing function

I've been diving into JavaScript and managed to create a website that displays random gifs when clicked from an array. Now, my goal is to implement a while loop to prevent duplicate images from being shown consecutively. However, I seem to be facing ...

javascriptjqueryhtmlcss

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

UPDATE: Issue occurring on Internet Explorer 10, Windows 7 When using the transform property to adjust the horizontal position of an element during animation, the vertical value is updated as well. However, despite setting the horizontal value to the same ...

javascripthtmlcsscss-animations

How to align three columns in the center using Bootstrap 4

Is there a way to center three col-md-3 columns without using offset? Offset doesn't work for me as I would have to offset the first column by one and a half columns. Is there an alternative method to achieve this? Below is the code outline: .col- ...

htmlcssbootstrap-4

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

Designing HTML components with cohesive HTML and CSS

Check out this live demo I'm working on creating modules that have consistent markup and CSS, allowing for flexibility in size adjustments. I want to use the same module in various sections like utilities, footer, or header. My goal is to structure ...

htmlcss

The magic of coding is in the combination of Javascript

My goal is to create a CSS animation using jQuery where I add a class with a transition of 0s to change the color, and then promptly remove that class so it gradually returns to its original color (with the original transition of 2s). The code below illus ...

javascriptjqueryhtmlcss

How can CSS be used to select and style all elements within a <p> tag?

My fashion sense is specific: #style p { padding:10px; } I'm unsure which elements will be nested inside the paragraph. Is there a method to apply 10px padding to all elements within that paragraph? Can it be done like this? #style p everything ...

csscss-selectors

PHP does not provide any error when an update on a database row fails

When I try to update values retrieved from the database into a form on submission, the process fails without any error message. Below is the PHP code snippet: <?php session_start(); $username=$_SESSION['uname']; $cn=mysqli_connect("loc ...

phphtmlcssbootstrap-4

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

javascriptcssreactjsmaterial-ui

Troubleshooting: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue. I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-togg ...

cssbootstrap-5

The HTML table is not displaying properly due to colspan being used incorrectly

A table has been created with all headers having colspan=2 and some body cells having colspan=N. In certain instances, the display is not rendering correctly: https://i.sstatic.net/xARV6.png td, th { border: solid #aaa 1px } <table> <thea ...

htmlcss

Utilize the after: and before: selectors within Internet Explorer versions 6 and 7 for optimal performance

I recently implemented a sleek wizard style I found on a blog, but encountered some issues with compatibility in Internet Explorer. The blog mentioned that: For browsers lacking support for :after/:before/nth-child, the code may not function properly. Is ...

asp.netcsscross-browser

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

jquerycssaccessibility

The border of the cell in the top row only partially overlaps with the margin area

Have you noticed how the left border of the first cell doesn't line up with the margin area of the table? This peculiar phenomenon seems to occur only in the first row: https://i.stack.imgur.com/qMWCh.jpg In all other rows, the border aligns proper ...

css

The character codes for symbols in a unique font available at fontello.com

Is there a way to identify the charCode for a glyph in a custom font? In order to keep my website lightweight, I have designed a custom font with only the 5 icons from FontAwesome that are necessary using . These icons will replace the characters from the ...

cssfont-awesomeglyph

Ways to incorporate a tertiary tier in my CSS dropdown navigation

I currently have a CSS code that displays a two-level menu, but I'm looking to expand it to include a third level. Unfortunately, I'm stuck and unsure of what changes to make in the CSS. Below is the existing code: #topnav{ // Existing CSS p ...

phphtmlcssweb

My table is only recording the last row when I add an onclick function to each row

I have a table in my html file with 3 rows. I am attempting to dynamically add the onclick method to each row during the window's onload event, which should display an alert with the clicked row index. However, no matter where I click, it always retur ...

javascripthtmlbootstrap-4

The div's height is not matching the CSS declaration as expected

In my HTML, I have a div called innerDetails which serves as a flex item with the following CSS properties: .cover { height: 100vh; width: 100%; } #screenCon ...

htmlcss

Overriding NavLink in React Bootstrap with custom CSS doesn't work as expected

Recently diving into the world of React and Bootstrap, I decided to experiment with them by using react-bootstrap. It was mentioned that a simple way to override Bootstrap CSS is to apply your own CSS on top of it. So here's what I've been workin ...

javascriptcssreactjsbootstrap-4react-bootstrap