Align all columns to the same height

I'm facing an issue with setting the heights of col2 and col3 to 70% relative to col1 which is at 100%, and col4 and col5 to 30%. I've tried applying some styles to achieve this but haven't been successful so far.

Any suggestions or recommendations?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d19031b031d">[email protected]</a>/dist/css/bootstrap.min.css">

  </head>
  <body>
    <div class="container-fluid">
       <div class="row">
        <div class="col-3 border">
          <h1>Col1</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="col">
          <div class="row">
            <div class="col-12" style="height:70%">
              <div class="row">
                <div class="col border">
                  <h1>Col2</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div class="col border">
                  <h1>Col3</h1>
                </div>
              </div>
            </div>
            <div class="col-12" style="height:30%">
              <div class="row">
                <div class="col border">
                  <h1>Col4</h1>
                </div>
                <div class="col border">
                  <h1>Col5</h1>
                  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
       </div>
    </div>
  </body>
</html>

cssbootstrap-4

Answer №1

By setting the column heights to a fixed height, whether a percentage or 100% of its parent, you limit the expansion potential in case your content in Col 5 grows unexpectedly in the future.

To allow for more flexibility, consider making the right-side column a flex container and enabling the upper row to expand while keeping the lower row static. This may not result in an exact 70/30 split visually, but it will provide the option to accommodate more information in the lower row without any overflow issues.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404706a726a74">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-12 col-sm-3 border" style="padding: 0 15px">
            <h1>Col1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="col-12 col-sm-9">
            <div class="container-fluid d-flex flex-column" style="min-height: 100%;">
                <div class="row flex-grow-1">
                    <div class="col-12 col-sm-6 border">
                        <h1>Col2</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                    <div class="col-12 col-sm-6 border">
                        <h1>Col3</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6 border">
                        <h1>Col4</h1>
                    </div>
                    <div class="col-12 col-sm-6 border">
                        <h1>Col5</h1>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, sunt.</p>
                    </div>
                </div>
            </div>

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

<div class="container-fluid bg-info mt-1 pt-5">
    <p class="text-center">next section</p>
</div>

Answer №2

.fill-height {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-3 border">
      <h1>Col1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="col">
      <div class="row fill-height">
        <div class="col-12" style="height:70%">
          <div class="row fill-height">
            <div class="col border fill-height">
              <h1>Col2</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="col border fill-height">
              <h1>Col3</h1>
            </div>
          </div>
        </div>
        <div class="col-12" style="height:30%">
          <div class="row fill-height">
            <div class="col border fill-height">
              <h1>Col4</h1>
            </div>
            <div class="col border fill-height">
              <h1>Col5</h1>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </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

Modifying the color of a div element solely through CSS styling

I am currently working with a set of buttons, available at this link. While browsing through this helpful post, I encountered an issue. Whenever I click on another element, the orange color of my button disappears. How can I maintain the orange color on t ...

htmlcssangular

Utilizing CSS styling to create page breaks in R Markdown disrupts the flow of table of contents

Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool. A simplified Markdown docum ...

htmlcssrmarkdownwkhtmltopdf

Further exploration of key frames in CSS

Assuming I start with: @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} Can I modify it to achieve the following effect where it jumps left to right and back as its main position? @keyframes animateLeftJump{ from{left:-300px;opac ...

css

differences in the way web pages are displayed in Microsoft Edge and Internet Explorer when compared to

I can't wrap my head around the issue I'm currently facing: it seems that MS Edge and Internet Explorer display things at a similar size to other browsers only when the user's zoom level is set to 150% (not 100%). Am I the only one experien ...

htmlcssinternet-explorermicrosoft-edge

Tips for positioning the sign up button in the navbar

My expertise lies in HTML, but I'm currently honing my CSS skills. I'm facing a challenge with positioning my sign-up button at the extreme right without it being part of the main navigation link section. Does anyone have suggestions on how to ac ...

htmlcssbootstrap-5

Minimum width compared to Maximum Width

Exploring media queries for the first time and seeking some guidance. I initially developed a Desktop version of my website, now considering making it responsive as well. While researching, I came across suggestions to use max-width in this scenario, but ...

css

Display picture next to content with the help of CSS/Bootstrap and Django's Jinja 2

I'm having trouble displaying an image next to text, it keeps showing up below. Here's the code snippet: <div class="container"> <div class="row"> <div class="col-md-8"> < ...

cssdjangobootstrap-5

Adjust the table to line up perfectly, center the content within the table cell (td), and align the

I'm currently working on aligning a table by centering the td elements and left justifying the text inside them. My initial attempt was to use flex for center alignment, which worked to some extent but I couldn't get the left alignment right. I ...

css

Is there a way to position right and left divs within a content div on the same top-level?

#textblock{ width: 260px; height: 100%; position; border: 1px solid #999999; padding: 0 5px; float: right; font-size: 95%; background-color: #FEF4CC; } #brevillestandard{ padding: 8px 0 0 5px; ...

css

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

My div is set to have a margin:auto, but the h1 inside is not centered as expected. I've tried various solutions, but none seem to work. Can someone please help me get it centered properly? body { background: #5D6D7E; color: wh ...

htmlcsswebmargin

I am facing an issue where Chrome is causing my image set with max-width to stretch

I am currently facing an issue with adjusting the max-width of images in the CMS I am working with. When I set a max-width in Chrome (haven't tested in other browsers yet), the height of the image ends up getting stretched - you can view the problem h ...

image-scalingcss

Enhance your SVG image in D3 by incorporating a drop-shadow effect

Trying to apply a drop-shadow effect to an SVG image using D3. Check out my code below and see the example block here: var imgurl = 'http://www.logo-designer.co/wp-content/uploads/2015/08/2015-Penn-State-University-logo-design-4.png'; var mar ...

javascriptcssd3.jssvg

Issue with Hover Behavior in Bootstrap 5 Navbar Dropdown

While developing a website using Bootstrap 5, I encountered an issue with the navbar dropdown not opening on hover despite attempting to add custom CSS. Strangely, the CSS code worked perfectly in isolation when I tested it in a code snippet, but failed to ...

htmlcssvisual-studiofrontendbootstrap-5

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

jquerycss

Bootstrap progress bar loading does not function properly

I have a progress bar on my page with three parts: progress-bar-success, progress-bar-warning, and progress-bar-danger. I would like each part of the progress bar to complete sequentially, starting with progress-bar-success, then progress-bar-warning, and ...

jqueryhtmlcsstwitter-bootstrap-3

I'm puzzled as to why the navigation bar isn't staying fixed

I recently created a landing page using Bootstrap, but I'm having an issue with the navbar not being fixed. Here is the code for the navbar: <nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded"> < ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with vertical alignment within nested divs

I have been attempting to center a search bar inside a top banner vertically. My understanding was that the following code could achieve this: #banner { height: 35px; width: 100%; } #searchbar { height: 15px; position: relative; top: 50%; ...

cssvertical-alignmenthtml

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

Tips for Implementing Show and Hide Functionality in JavaScript

I have a piece of cshtml code similar to the following: <span class="p1"> Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book authored by Rajiv Malhotra and Aravindan Neelakandan, arguing ...

javascriptc#htmlcssasp.net

Tips for positioning button to the right of a text box in Bootstrap

Is there a way to align my button with my text boxes so that the right sides form a straight line? I've been struggling to achieve this without using margin-left (as it only works for one screen size). https://i.sstatic.net/RrEYV.png I attempted to ...

htmlcsstwitter-bootstrapbootstrap-4