"How can I adjust the height of a Bootstrap column to match the height of its neighboring column

In my Bootstrap 4 layout, I have set up two columns...

  • The left column contains three cards in columns
  • The right column has a list group

The content in the list group is longer than that of the cards on the left side.

Is there a way to make the height of the list group's container match the adjacent column with the three cards using Bootstrap?

Currently, I am using CSS max-height, but I feel this might not be the best way forward.

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

    <!-- Left column -->
   <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

      <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
            <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
              First card content.
            </a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
          <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
            Second card content
          </a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
          <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
            Third card content
          </a>
        </div>

      </div><!-- end .row -->

  </div><!-- end Left column -->


  <!-- Right column -->
  <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 725px; overflow-y: scroll;">

     <div class="list-group list-unstyled">
      List group content
     </div>

  </div>

Note: The cards use .card-img-overlay and maintain dimensions similar to the image inside.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

As outlined in this source, the solution involves adding overflow:auto to the parent column and positioning the list-group absolutely within the column.

  <div class="row">
        <!-- Left column -->
        <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
              First card content.
            </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
            Second card content
          </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
                        Third card content
                      </a>
                </div>
            </div>
            <!-- end .row -->
        </div>
        <!-- Right column -->
        <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block overflow-auto">
            <div class="list-group list-unstyled scroll overflow-auto">
            </div>
        </div>
   </div>

Answer №2

Keep all elements within a single parent div and set the height for that div.

<div id="parentDiv" style="height: 350px">
<!-- Left column -->
<div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
        <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
          First card content goes here.
        </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Second card content goes here
      </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Third card content goes here
      </a>
    </div>

  </div><!-- end .row -->


 <div class="list-group list-unstyled">
  List group content is displayed here
 </div>

</div>
</div><!-- closing tag of the parent 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

Novice problem with the <div> tag

I am currently in the process of developing a website, and I have encountered an issue with the title not staying within the designated div box at the top of the page. <div style="width:1000px;height:40px;background:grey;border:3px solid;border-radiu ...

htmlcss

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

javascripthtmlfetch-api

Interacting with a span button within the parent element using its specific id with Selenium and Java

Can I click on a span button nested within a div element and use the input's id to ensure test stability? HTML: <div class="idit-go"> <input id="IDITForm@checkRuleVO" class="GoLong align-left idit-go-text" type="text" value="" title="Valida ...

javahtmlseleniumxpath

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

javascriptjqueryhtmlcssiframe

What could be causing Bootstrap to fail in my fresh Angular project?

Upon creating a fresh angular project, I proceeded to install bootstrap using npm. Once it was successfully installed in my node_modules folder, I added it to my angular.json file. "styles": [ "/node_modules/bootstrap/dist/css/ ...

angularbootstrap-4

Understanding the scope of variables in HTML files, JavaScript files, and PHP files when echoing statements

Is there a way to define a global javascript variable that can be accessed from multiple places within an HTML page? I need the variable to be accessible in three specific locations: Within the code of the HTML page favorites.php. Inside a separate javas ...

phpjavascripthtmlscope

Picture featuring a right-angled triangle on the right side

I have been experimenting with creating a complex image effect using CSS only, without any JavaScript. Despite several attempts, I haven't been able to achieve the desired outcome yet. https://i.sstatic.net/sUEaJ.jpg CSS .container{ width: 500p ...

csscss-shapes

Implementing CSS and HTML in Email Communication

I'm noticing a difference between how this appears in a browser versus an email. The text on the image looks perfect when viewed on Mozilla/Chrome, but when I use the same code in an email, the text ends up displaced below the image (right beneath it) ...

htmlcssemail

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

phpjqueryhtmlajaxsubmit

What is the best way to cause a ball to collide with a triangle power-up on a canvas

I'm currently facing an issue with the power up feature in my game. Despite successfully displaying the shape on screen, the ball fails to speed up as expected upon collision with the shape. <html> <title>Level Selector</title& ...

javascripthtmlcanvashtml5-canvas

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Using jQuery to move a div to a specific location on the page

Is there a way to translate the position of div x and y using Jquery that is compatible with all browsers, such as IE 7, IE8, IE9, and IE10? I have attempted the following: <div id="s1" style="-ms-transform:translate(159,430)"> hello ...

javascriptjqueryhtmlcssinternet-explorer

Python Selenium returning 'None' when attempting to retrieve the source attribute of an image

Having trouble retrieving the src of images in the class "KfFlO" using selenium. Whenever I try to print for the source, Python keeps returning "none." Can anyone help me identify the problem? Below is my code snippet: from selenium import webdriver from s ...

pythonhtmlimageselenium-webdriverweb-scraping

How to Round Decimals in DataTables

I am encountering an issue with my data table's footer, which is supposed to display the sum of each column. However, while the values within the table are rounded to two decimal places, the values in the footer do not always adhere to this formatting ...

javascripthtmldatatable

Create a website that can expand in size without relying on percentage values

At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...

htmlcssresponsive-designtablet

jquery toggleClass not retaining previous click event

I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it d ...

javascriptjquerycssasp.net-mvc

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

javascriptangularjshtmlcanvasselenium-webdriver

How come outerHTML retrieves <!-- --> comments?

I came across a jsfiddle link that showcases the collection of outerHTML for elements with a class='active'. Surprisingly, even when certain parts of the HTML are commented out like this: <!-- <div>'Some inner text'</d ...

javascriptjqueryhtmlouterhtml

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

css

What's the issue with this HTML button not functioning properly?

I'm having an issue with a button in my code that is supposed to change the text from 'hello' to 'Goodbye', but for some reason, it's not working. I have ensured that my code is properly indented in my coding program. Below i ...

javascripthtmlcssbutton