"Optimizing the height of rows in Bootstrap 4

I'm attempting to achieve a layout like this using Bootstrap 4https://i.sstatic.net/sF9pd.jpg

with uniform height for the green rows and red row

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
   <div class="container">
        <div class="row">
          <div class="col-md-8 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
    
    </div></div>
      <div class="col-md-4 col-lg-3 G">
          <div class="row">
          <div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
    
    </div></div>
       <div class="col-md-6 col-lg-6 B"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
    
    </div></div>
       <div class="col-md-12"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
    <img src="http://lorempicsum.com/rio/800/500/3" class="img-fluid" alt="Responsive image">
    
    </div></div>
       </div>
    </div>   
       
        </div>
    </div>
All images are of equal size and responsive, but I am facing difficulty with getting the green rows and red row to have equal heights.

csstwitter-bootstrapbootstrap-4

Answer №1

Learn how to use the sizing utility classes...

  • h-50 = sets height to 50%
  • h-100 = sets height to 100%

 <div class="container">
        <div class="row">
            <div class="col-md-8 col-lg-6 B">
                <div class="card card-inverse card-primary">
                    <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
                </div>
            </div>
            <div class="col-md-4 col-lg-3 G">
                <div class="row h-100">
                    <div class="col-md-6 col-lg-6 B h-50 pb-3">
                        <div class="card card-inverse card-success h-100">

                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 B h-50 pb-3">
                        <div class="card card-inverse bg-success h-100">

                        </div>
                    </div>
                    <div class="col-md-12 h-50">
                        <div class="card card-inverse bg-danger h-100">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Alternatively, if you have an uncertain number of child columns, utilize flexbox and apply d-flex flex-column on the row along with h-100 on the child columns for automatic height filling.

<div class="container">
    <div class="row">
        <div class="col-md-8 col-lg-6 B">
            <div class="card card-inverse card-primary">
                <img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
            </div>
        </div>
        <div class="col-md-4 col-lg-3 G ">
            <div class="row d-flex flex-column h-100">
                <div class="col-md-6 col-lg-6 B h-100">
                    <div class="card bg-success h-100">

                    </div>
                </div>
                <div class="col-md-6 col-lg-6 B h-100">
                    <div class="card bg-success h-100">

                    </div>
                </div>
                <div class="col-md-12 h-100">
                    <div class="card bg-danger h-100">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

Using JSON to create bootstrap styled link buttons

My current code is functioning well with links. However, when I try to use a bootstrap button instead of a regular button, the button appears in the table but no longer directs to the link. var button = "<button class='btn btn-inf ...

javascriptjqueryjsontwitter-bootstrap

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules

Enhance your images with Jquery thumbnail zoom feature

I am in the process of creating color swatches for clothing items, using them as a reference point. http://jquery.malsup.com/cycle/pager7.html Take a look at the thumbnails on the webpage mentioned above. My goal is to display these thumbnails without re ...

jquerycssimage-processing

Header Button and Dropdown Divs Alignment

Currently, I am working on creating a three-button system to showcase the collectibles in my game's website. I have the buttons prepared, but the one on the right flies off the screen, and the middle button appears misaligned. My goal is to design a ...

htmlcssweb

Stacking pseudo elements in CSS positioning

Hey there! I've been using before and after in my element and it's been working well, but now I'm facing a problem. When I try to set a background color for the section, the before and after elements disappear. I understand that this issue a ...

javascriptjqueryhtmlcss

Crafting visually stunning interfaces with Material UI

I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...

cssreactjsmaterial-ui

Tips for deleting the drop-down arrow from Mozilla Firefox

Is there a way to eliminate the dropdown arrow that FireFox usually displays? I have included an image below showing what I am referring to: This is the CSS code I'm using: @-moz-document url-prefix(){ .class select { width: 110%; } } .class > ...

htmlcssfirefox

Can you include text within the border of a table?

Currently tackling my homework assignment which involves creating a virtual chessboard. Progress has been smooth thus far, as I've managed to write the code for it: I am now looking to incorporate Letters (A-H) and Numbers (1-8) around the board, rep ...

htmlcss

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...

cssangular

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm

Aligned to the right, the ::before element stands out in the design

I have a button that already includes an ::after element below it, but I am looking to add a shape/element to the right side of the div. a { position: relative; display: inline-block; padding: 15px 10px; margin: 0 5px; color: #222; f ...

htmlcss

What is the method to determine the height of a Bootstrap Popover?

Can anyone help me figure out how to determine the height of a Popover? I have only been able to find the width so far. I need to know the Popover height in order to resize the DIV height accordingly. Note: Using Bootstrap 2.x ...

jquerytwitter-bootstrap

A guide to updating content using a toggle button in HTML, CSS, and JavaScript

Currently, I am facing a challenge with toggle switches while working on my website. I have successfully created the toggle button, but now I want to implement a function that allows me to switch between two different contents. The task seems simple - wh ...

javascripthtmljquerycsswordpress

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

jqueryhtmlcss

Tabbable bootstrap with dropdown functionality

I am currently in the process of integrating Bootstrap tabs and dropdown menus using version 2.3.4 <div class="container"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables. $('.slickSlider').slick({ dots: true, fade: true }); Currently, ...

jquerycssjquery-pluginssliderslick.js

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

javascripthtmlcssangularjs

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...

javascriptjqueryhtmlcss

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

Achieving seamless navigation with a React JS Bootstrap navbar through smooth scrolling

I am having trouble implementing smooth scrolling on my web application, especially with a navbar from bootstrap. Can anyone offer guidance on how to achieve this? Your help is greatly appreciated! import React, {Component} from 'react'; import { ...

reactjsbootstrap-4