Varying Heights of Columns in Bootstrap

I need assistance in creating a layout with two columns. The first column should have three smaller boxes of equal height, while the second column should have one larger box. However, when I try to increase the height of the box in the second column, the last two boxes in the first column get pushed further down the page. I want the two columns to be aligned next to each other. (I want the red and blue boxes to move up next to the large grey box)

HTML: 

<div class="row">
                <div class="col-xs-4">
                    <div class="l-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
                <div class="col-xs-7">
                    <div class="dashboard col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="rel-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="exp-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

CSS:

.l-board{
    background-color:#F5FCF4;
    margin-bottom: 10%;
}
.rel-board{
    background-color:#FAEDED;
    margin-bottom: 10%;
}
.exp-board{
    background-color: #F0F5FA;
    margin-bottom: 10%;
}

.dashboard{
    background-color: #F4F4F4;
}

Current Look:

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

Layout that I want:

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

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

Bootstrap functions using a grid system where content is organized in columns placed inside rows. This approach ensures horizontal alignment before vertical alignment. For a specific layout, dividing the page into two columns, left and right, is recommended. The left column should have three elements taking up all available width using the col-12 class, while the right column should contain a single element with triple the height.

It's important to consider any margin or padding set on the right column. In this example, a margin of 5px is used, requiring an additional 20px of height on the right column to cover the outer 10px plus the two inner 5px gaps:

.element {
  height: 100px;
  background: red;
  margin: 5px;
  padding: 10px;
}

.right .element {
  height: 320px;
}

:root {
  --height: 100px;
  --margin: 5px;
}

.element {
  background: red;
  height: var(--height);
  margin: var(--margin);
  padding: 10px;
}

.right .element {
  height: calc((var(--height) * 3) + ((var(--margin) * (3 + 1))));
}

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

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

javascriptjqueryhtmlcss

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

htmlcss

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

phphtmlcss

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

javascriptjqueryhtmlcss

Is it possible for a scrollable div to fill the space above a BottomNavigation bar?

My current project involves creating a fixed bottom navigation bar, with a scrollable div above it displaying various card lists. In my attempts to achieve this layout, I consulted both the Material-UI documentation here and here. However, I struggled to ...

cssreactjsmaterial-ui

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

CSS: The Ultimate Guide to Fixing Your Footer at the Bottom of Your Page

My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute. html, b ...

htmlcss

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : https://i.sstatic.net/pK4 ...

javascriptjqueryhtmlcssnavigation

The JQUERY Uncaught Error: Syntax error message popped up when trying to access an unrecognized expression on the javascript: void(0)

I've encountered an issue after upgrading to jQuery 3.4.1 while using bootstrap 3. The console keeps showing this error: Uncaught Error: Syntax error, unrecognized expression: # Here is the section of code causing the error: <div class="btn-grou ...

javascripthtmljquerytwitter-bootstrap-3

The concept of CSS Parent Elements refers to the relationship

Is it possible to dynamically apply CSS style based on the parent property of a div element using JavaScript? Here is an example: <div clas="parent"> <div class="child"> <div class="x"></div> </div> </d ...

javascriptcss

Dividers afloat - expanding current script with multiple additions

I am currently utilizing this website as a hub for showcasing my various web projects. The jsfiddle code provided in response to this particular inquiry is exactly what I need, however, I am unsure of how to have multiple divs moving simultaneously acros ...

javascriptjquerycsshtml

Tips for combining a select option and search field into a seamless integrated feature

I'm looking to implement a search field in my project that includes the ability to select specific parameters before running the search. I want it to have a seamless design similar to the image shown below. https://i.sstatic.net/niWP8.png Although I ...

javascripthtmlcssreactjsmaterial-ui

Styling with CSS to create a layout similar to Facebook Messages

I am attempting to design a web layout similar to Facebook's Messages page, with a fixed height header and footer, and a flexible height main element. Within the main element, there needs to be: A div (100% height of the main elem.) that is scrolla ...

htmlcssflexboxscrollable

Vue.js transition-group does not apply the *-move class

As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can& ...

javascriptcssvue.js

Simple HTML alignment tool instead of Bootstrap

Are there any other options besides Bootstrap for a predefined CSS library that can help align and customize an HTML page quickly? I have been using ASP.NET and Bootstrap for my development, but I'm looking for something new. If there is another libr ...

htmlcssasp.netfrontend

Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Is there a way to customize the color of the horizontal line in react-native-otp-inputs for react native? I used react-native-otp-inputs to capture user OTP input, but now I want to change the color of the default black horizontal line to white. You can re ...

javascriptcssreactjsreact-native

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

javascriptjqueryhtmlcss

What is the method for causing a patch event using inline HTMX tags when a carousel-item in a Bootstrap 5 carousel is activated?

I am currently working on triggering a HTMX patch request with a specific id whenever an item in a Bootstrap5 carousel becomes active. While I understand that this can be achieved with some additional scripting, I am curious if it can be purely done using ...

htmltwitter-bootstrapbootstrap-5htmx

Place a button in relation to the top of its parent element

I am trying to display control buttons at the top of a table cell when hovering over an image within the cell. Here is the HTML structure I have: <table id="pridat_fotky"> <tbody> <tr> <td class=" ...

htmlcss

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

javascriptjqueryhtmlcss