What is the best way to restrict the row height to match a set column height in Bootstrap?

I need a row with 2 columns, where the height of the row is determined by the content of column 1. Column 2's content should be truncated if needed.

  <div class="container">
<div class="row">
  <div class="col-3" style="background-color: yellow;">Lorem, ipsum dolor.</div>
  <div class="col-9" style="background-color: blue;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>

At times, the 2nd column breaks while the first one remains intact due to varying widths. This situation should be prevented.

The reason for this design is to have an image in the first column that always fills the full height of the row, while the text in column 2 serves as a preview and can be shortened if needed.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To ensure the content within a column is scrollable, wrap it in a absolute positioned div and use overflow-auto...

<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: yellow;"><img src="//via.placeholder.com/200x50"></div>
        <div class="col-9 position-relative" style="background-color: blue;">
            <div class="position-absolute overflow-auto top-0 bottom-0 start-0 end-0">Lorem ipsum dolor sit amet consectetur, dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
        </div>
    </div>
</div>

For more insights, visit: bootstrap 4 row height set by specific col - not highest one

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

Unable to resize images in Firefox

Why is it that resizing doesn't seem to work in Firefox but functions fine in Internet Explorer? I'm struggling to find a way to make it consistent across all browsers. My goal is to resize the width to 800 and height to 475, disable maximizing t ...

javascriptjqueryhtmlfirefox

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

The website functions well in responsive design mode on an iPad screen, but encounters issues when viewed on an actual

The website is functioning well in responsive design mode on an iPad screen, however it seems to be having some issues specifically on iPad devices. I have tested it on all other devices and it works perfectly fine, but for some reason not on iPads. Feel ...

javascripthtmlcsstwitter-bootstrap

The variable in my scope is not reflecting the changes in the HTML view

Here is my code for handling file attachments in AngularJS: $scope.attachments = []; $scope.uploadFile = function(files){ for(var i=0; i<files.length; i++){ $scope.attachments.push(files[i]); console.log($scope.attachments.length); } } ...

javascripthtmlangularjsangularjs-scope

Strangely peculiar glitch found in browsers built on the Chromium platform

During a school assignment, I'm attempting to adjust the width of a button using Javascript. Below is my code: const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(button.offsetWidth); butto ...

javascripthtmlgoogle-chromemicrosoft-edgechromium

How to insert space after every item generated by ng-repeat in AngularJS

I'm looking to evenly distribute elements based on this inquiry How to distribute li elements equally? I am utilizing angular with jade: ul li(ng-repeat="item in items") {{item.name}} However, ng-repeat does not create newlines after each element ...

javascripthtmlangularjs

What's the best way to make certain .card-img-overlay content align at the bottom?

I need help with positioning elements within Bootstrap 4 cards that are inside columns. https://i.sstatic.net/uebMs.png <div class="col-6 pb-md-4"> <a href="http://www.example.com/link.html" class="card bg-dark text-white shadow-sm border-0"> ...

twitter-bootstrapbootstrap-4

Is it possible to modify CSS properties using Ajax?

I am attempting to dynamically change the background color of a div using AJAX to fetch the user's specified color from the database. Below is the code snippet I am using: $.ajax({type: "POST", data: {id: id}, url: "actions/css.php", success: functio ...

javascriptjquerycssajaxjson

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

cssangularwebpackwebpack-style-loadercss-loader

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

htmlcss

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," ...

htmlcssgoogle-chrometwitter-bootstrap

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

I am working on a project using Ionic 2 and I have implemented multiple tabs in the application. However, I need to find a way to hide the top tab when the user clicks on the bottom tabs menu icon. Here is my Plunker for your reference. My goal is to ma ...

htmlcssangularionic2

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

After posting a question about the JavaScript progress bar not working with object-oriented JavaScript code on Stack Overflow, I decided to try rewriting the script using arrow functions. Here is the new code: document.getElementById("barButton").addEve ...

javascripthtmlcssoop

How to Align Title in the Center of a Section Containing Multiple Images?

I have a situation where I am using a StyledHead section to display 10 images from an API. The images are wrapped in another section called StyledHeader, which also contains an h1 element. How can I center the h1 element both vertically and horizontally so ...

cssreactjsstyled-components

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

What steps should I take to create a slider using my image gallery?

I have a unique photo gallery setup that I'm struggling with: As I keep adding photos, the cards in my gallery get smaller and smaller! What I really want is to show only 4 photos at a time and hide the rest, creating a sliding effect. I attempted ad ...

javascripthtmlcss

Expand table with additional rows, showcasing a Bootply example using Bootstrap

After discovering a dynamic table example on this website, I decided to implement it in my project. The table allows for parent-child relationships, where clicking on a row reveals another row underneath. However, I am struggling to take this a step furt ...

mysqltwitter-bootstraphtml-tableparent-child

Some font-awesome icons are not appearing on the screen

As a beginner in web design, I am experimenting with using font awesome icons in Angular 9 projects within list items. While some of the icons are displaying properly, others are not. You can see the issue in the attached image. To access the icons, I have ...

htmlcssangularfont-awesome

Incorporate a corner box feature to bring attention to the typed.js functionality

I have successfully integrated typed.js into my project and now I am looking to replicate the highlighted text with an excel-like box in one corner. I've managed to get the text typing out while also adding an SVG for the box in HTML, but I'm hav ...

javascriptjqueryhtmlcss

What is the best way to include a CSS stylesheet in a Wordpress theme?

Is there a way for me to properly load my custom CSS in Wordpress so that the dynamically inputted content on my pages matches the styling of my header and footer? In my functions.php file, I currently have the following code, but it only prints the code ...

csswordpressthemes