How to create a dynamic height grid using Bootstrap?

Seeking assistance with implementing the layout shown in the image below using bootstrap 4. I am facing an issue with adjusting the height of div 1 and 2 dynamically based on the content in div 3. Can anyone provide some guidance?

https://i.sstatic.net/mksLU.jpg

<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col" style="background:yellow;">
      <div class="row">
        <div class="col" style="background:red;">1</div>
      </div>
      <div class="row">
        <div class="col" style="background:white;">2</div>
      </div>
    </div>
    <div class="col" style="background:green;">
      3<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

htmlcssflexboxbootstrap-4

Answer №1

Insert this code snippet into your left-hand column (please pay attention to the changes in markup):

<div class="col flex-column d-flex p-0" style="background:yellow;">
  <div class="col" style="background:red;">1</div>
  <div class="col" style="background:white;">2</div>
</div>

To convert the col into a column flexbox, include d-flex flex-column and remove the padding with the p-0 class - ensure that child elements have the col class. View the demonstration below:

<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col flex-column d-flex p-0" style="background:yellow;">
      <div class="col" style="background:red;">1</div>
      <div class="col" style="background:white;">2</div>
    </div>
    <div class="col" style="background:green;">
      3<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </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

Concealing a hyperlink based on the login status of a particular customer using PHP

I'm relatively new to coding and I'm encountering some difficulty in finding a solution to what seems like a simple problem. My issue revolves around hiding a link if a specific client is logged in. Let me provide some context: On our website, c ...

phphtml

What is the method to reduce the gap between the label and field in Vuetify input controls?

Consider a custom Vuetify text field as an example (Playground) <template> <v-app> <v-container> <v-text-field label="label goes here" variant="plain" density="compact" ...

htmlcssvuetify.js

Click automatically upon loading the page

I'm looking for help to automatically click a button after the page loads. I currently have to manually click the "Buy the basket" button, but I am not familiar with coding at all. I need a fully ready code that can automate this process for me. Can s ...

javascripthtmlonpageloadstring

What is the best way to achieve a full-width navbar with the scrollbar positioned below it?

I have a similar code to what's shown here The menu is fixed, but the scrollbar seems to be appearing from the right of the navbar What I want is for the scrollbar to start below the menu instead see image example here ...

css

Converting ISO date format to 'MM/DD/YYYY' format in a Bootstrap/Angular application

Is there a way to convert an ISO date string to 'MM/DD/YYYY' on load in a bootstrap/angular environment? Upon loading, the date picker currently displays like this: https://i.sstatic.net/g5MkI.jpg We want the user to input the date in 'MM/ ...

angularbootstrap-4

Assigning multiple identifiers to a single element

Multiple posts have emphasized the importance of using an ID only once. But, I'm facing a situation where I need to pass 2 PHP variables to my JavaScript. I initially thought of using document.getElementById, but since IDs must be unique, this approa ...

javascriptjqueryhtmlajax

Customize the appearance of the search box in Serverside Datatables

Is there a way to adjust the search and show inputs for datatables so that I can customize their width and make them fit my dynamic column sizing? The issue I ran into is that these inputs are enclosed within <label> tags in the source JavaScript, an ...

javascriptjquerycssdatatables

Issues with rendering Bootstrap components in React project

For my React project, I used yarn to install Bootstrap with the command yarn add bootstrap. Next, I imported 'bootstrap/dist/css/bootstrap.min.css' and copied the Bootstrap navbar code into my project. However, upon starting the project, the disp ...

reactjsbootstrap-4react-bootstrap

Is there a Polar transformation available in CSS3?

Converting a line into a ring is a straightforward process in graphic design software like GIMP: https://i.sstatic.net/7lQZe.png (source: adamhaskell.net) I'm exploring the possibility of achieving the same effect using CSS. Here's what I&ap ...

csscss-transforms

Using jQuery to select and animate several elements simultaneously without repeating the animation

Issue Summary (Fiddle): I'm trying to make all elements fade out simultaneously when clicked, but the current code causes the target to trigger three times resulting in three alert() calls. I want them to fade together without using a wrapper element ...

javascriptjqueryhtmlcss

issue with date filtering in query

I'm currently developing a date and time filter for a database. The goal is to query results only within a specific date range selected by the user in an input field. I've written some code, but it seems like something is missing because it' ...

phphtmlmysql

Tips for aligning inputs vertically and stretching them horizontally with bootstrap flex only

For a practice exercise, I want to achieve vertical left alignment and horizontal stretching of input fields using only Bootstrap Flex (or CSS3 flexbox), without relying on Bootstrap Grid or CSS3 grid layout. Here is the code snippet (also available on co ...

htmlcssbootstrap-4flexbox

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have: #aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img. ...

htmlcsscss-animations

Does Jquery AJAX send back raw data or HTML ready for use?

I'm currently developing a mobile app using Jquery Mobile. In order to populate the app with data, I need to make requests to an API and display the information within the app. At this point, I have two possible options: The API returns JSON data ...

javascriptjqueryhtmlajax

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

example <input type="text" id="txt1" onChange="calculateTotal();" /> <input type="text" id="txt2" onChange="calculateTotal();" /> <input type="text" id="txt3" onChange="updateValue();" readonly/> <input type="text" id="txt4" onChange= ...

javascripthtml

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

htmlcss

Is it possible for CSS to automatically style paragraphs based on the preceding heading class?

Looking to create some unique CSS rules for formatting interview transcripts. The format I have in mind is as follows: <h2 class="interviewer">Alice: [00:00:00]</h2> <p>Is it ok if I ask you a question now?</p> <h2 class="inter ...

csshtml-heading

JavaScript only collapsible navigation bar

I have implemented a collapsible navbar using Bootstrap 4 framework according to the documentation provided at this link. The navbar and its contents collapse on small screens, including smartphones, by adding the class .collapse.navbar-collapse. You can ...

javascripttwitter-bootstrapbootstrap-4

Error message: Angular JS encountered an issue when trying to initiate the test module. The cause

When I run JavaScript within an HTML file and use AngularJS with ng-repeat function, I encounter this console error: angular.js:38 Uncaught Error: [$injector:modulerr] Clicking on the link in the error message leads to: Failed to instantiate module test ...

javascripthtmlangularjsangularjs-ng-repeat

Ways to adjust text color after clicking on an element

Just a heads up, I didn't write all of the web-page code so I'm not exactly sure what pdiv is. But I want to see if I can fix this small issue [making text color change when clicked on to show which section you're reading]. This particular ...

javascriptjqueryhtmlcss