Utilizing Bootstrap 4 columns to control the height of a separate column

Is there a way in CSS to make one column in a bootstrap grid determine the height of another column within the same row? For example, consider the following scenario:

<div class="row">
  <div class="col col-sm-6" id="column1">
    <!-- an element with varying height based on screen width -->
  </div>
  <div class="col col-sm-6" id="column2">
    <!-- another element with different height - may be larger or smaller than the first element-->
  </div>
</div>

I want the column with the id "column1" to set the height for the second column with the id "column2." This is needed for displaying images of different sizes in the first column and text descriptions in the second column. The text description might have more content causing it to have a greater height than the image. In such cases, I do not want the column height to increase, instead, the overflow text should be hidden.

csstwitter-bootstrap

Answer №1

To achieve this, you can enclose the content of the right column within another div that is positioned absolutely. Then, apply the overflow-y: scroll; property to the parent .col, as demonstrated in the example below.

<div class="container">
    <div class="row">
        <div class="col col-sm-6" id="column1">
            <!-- an object whose height varies based on screen width -->
            <img class="d-block w-100" src="http://via.placeholder.com/350x200?text=Image">
        </div>
        <div class="col col-sm-6" id="column2" style="overflow-y: scroll;">
            <!-- another object with varying height - could be larger or smaller than the first object -->
            <div class="position-absolute">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas dapibus nisi eget pretium. Morbi neque risus, bibendum porttitor eleifend non, iaculis vitae est. Proin fermentum nisi ut urna aliquet, maximus laoreet ante maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dignissim metus vel dui consectetur, at bibendum enim interdum. Duis feugiat ipsum ut varius lobortis. Suspendisse id justo sapien. Phasellus bibendum lacus aliquet velit aliquam commodo. Praesent pellentesque dui vel gravida lobortis. Nam ullamcorper pellentesque viverra. Vestibulum tortor odio, pretium vel accumsan ut, rutrum vitae neque. Sed congue a risus sed dapibus. Quisque eu sem tincidunt, facilisis odio vitae, efficitur odio. Curabitur tortor nulla, volutpat ut leo et, egestas dignissim mi. 
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

.position-absolute is a Positioning utility class in Bootstrap that applies position: absolute; to the element.

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

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

htmlcssscrollscrollbar

What is the best way to display a single font in various sizes?

Have you ever noticed the unique typography on typedetail.com? The font sizes of the logo (TYPE DETAIL) and the title (ABOUT TYPE DETAIL) are different, with the first letters appearing larger than the rest. Surprisingly, upon inspecting the style sheets, ...

css

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

Currently in the process of redesigning a gallery for a client at www.stagecraft.co.uk/gallery.html I am encountering some challenges with my overlay. I want it to be centered and on top of any divs that are currently in view, as new images from the clie ...

jquerycssoverlaylightbox

Unleashed placement and drifting

Is it possible to style this layout without specifying an exact height for "Element 1"? Code Element1 { positon: relative; width: 100%; height: auto; /* Avoiding specific height */ } Inner1 { position: absolute; top: xyz px; left: xyz px; } Inner2 { po ...

css

Problem with applying ng-class directive in AngularJS

I am currently developing an application using AngularJs and Bootstrap. My goal is to display the title of a 'scenario' with different styling based on its status, along with a specific icon. Initially, I attempted the following approach: <s ...

htmlcssangularjstwitter-bootstrap

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

What is the technique to achieve a seamless blur effect?

Is there a way to create a smooth blur similar to a gradient transitioning from transparent to dark? .img { background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg); background-size: cover; background-position: center; width: 5 ...

htmlcss

Tips for setting up the information in a Bootstrap popover

I am currently working on a Google web app that involves Google Sheets data. My objective is to have the data displayed when hovering over a button, but instead, the data appears directly on the button without the hover display. What might I have done in ...

javascripthtmlcssbootstrap-4web-applications

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...

javascripthtmlcssdom

Is it possible to convert an image into text using CSS just for the purpose of printing

Imagine having a prominent banner at the top of a webpage that you want to print. Instead of depleting someone's ink by printing the entire banner image, is it possible to utilize CSS to substitute the image with text in H1 size? ...

cssimagetextheaderprinting

Switching Out Bootstrap Dropdown with Dropup (Varying functionality on two almost identical implementations)

In the midst of my project on Github Pages, I encountered an interesting issue involving replacing a bootstrap .dropdown with .dropup when the div's overflow-y: scroll causes the dropdown menu to be cut off or overflow. The functionality can be viewed ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Assign separate classes to even and odd div elements

My PHP code block has this structure: $flag = false; if (empty($links)) { echo '<h1>You have no uploaded images</h1><br />'; } foreach ($links as $link) { $extension = substr($link, -3); $image_name = ($extensi ...

phphtmlcss

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

javascripthtmlcss

When hovering over the alternating rows of a table, the shadow effect does not appear

I'm encountering an issue with CSS. I have a table and when hovering on the table's tr, there's a CSS property for box-shadow. The problem is that this box-shadow isn't fully visible for the even rows. https://i.sstatic.net/9uSjO.png ...

htmlcss

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Creating a static website utilizing React. Description I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below. visual effect The goal is to design a rectangular background with triangles cut out from it ...

cssreactjsgraph

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

javascriptcssreactjsmaterial-ui

An issue with excess whitespace appearing below the footer while adjusting the size of the webpage

I have a database table on my website that I am styling with the help of bootstrap. Check out this screenshot for the issue: https://i.sstatic.net/CUkjz.jpg For the HTML code, you can view it here: And for the relevant CSS, click on this link: I used pa ...

htmlcssbootstrap-5

Exploring and Modifying CSS Styles in Element Properties

Struggling to remove a 50px gap on my website. It's built on Joomla 1.5 and the white space is highlighted in orange below. When I inspect element using Chrome, it shows a margin-bottom: 50px but doesn't specify the location. Any tips on how to ...

htmlcss

What is the best way to configure my card components for a flex display?

Currently, I am in the process of learning React. I have a file named new_card_component.js that is responsible for displaying data fetched from the data.js file. The issue arises in my AirBnB.js file, where I'm passing the AirbnbApp module to a secti ...

cssreactjs