Adjust the container within the column to match the height of the column in the bootstrap grid

Why is the green container expanding over the blue column when I apply height: 100% or h-100?

Is there a way to make it fit just the remaining height of the column?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <h3>Content to retain</h2>
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

If my understanding is correct, you are looking to place the green block on top of the blue block.

The height cannot be set due to text being present between the two blocks.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </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

The navbar background spans the full width of the screen, with all content contained within minimum and maximum width parameters

Currently, I am working on a fluid website design where I have set specific min-width and max-width values. However, I want the navigation bar background to extend across the entire screen width without being limited by the max width parameter, while still ...

htmlcssbackgroundwidthnavbar

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states. Here is the basic struc ...

javascriptcssangularjsangularjs-directive

Animating or transitioning CSS keyframes to an inline value when the page is initially loaded

In my current project, I am working on creating HTML and CSS-based bar representations of percentage values. The structure of the code is as follows: Using HTML: <div class="chart"> <div class="bar" style="width:43%"></div> </div&g ...

jquerycsscss-transitionscss-animations

Warning from Google Chrome: Ensure password forms include optional hidden username fields for improved accessibility

Upon visiting the "reset password" route of my single-page application and checking the Chrome browser console, I am presented with a warning message: [DOM] Password forms should contain (optionally hidden) username fields for accessibility: (More info: g ...

htmlangularformsgoogle-chrome

Parsing HTML using PHP's Simple HTML DOM Parser

I'm having trouble extracting specific information from HTML code using a DOM parser. <div id="posts"> <div class="post"> <div class="user">me:</div> <div class="post">I am an apple</div> &l ...

phphtmlsimple-html-dom

Passing PHP value from a current page to a popup page externally: A guide

I'm currently facing an issue at work where there is a repetitive button and value based on the database. I need to extract the selected value from the current page into a pop-up page whenever the corresponding button is clicked throughout the repetit ...

javascriptphpjqueryhtml

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

javascriptjqueryhtml

The sixth character that is not in SGML format

I encountered a validation error while working on a website project Line 1, Column 1: non SGML character number 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.… In Firefox source viewer, certain lines are highlight ...

phphtmlvalidationcodeignitersgml

When a table cell is hovered over, a left border will be added

I've been working on adding a left border to the text in a way that highlights the first cell's border when hovering over a row, providing a clear indication of the current row for users. Feel free to check out my progress so far on this fiddle: ...

htmlcss

Changing the color of buttons within the anchor and menu-separator classes in WordPress

Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? Here is what I currently have: ...

htmlcsswordpress

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

javascriptphphtmlforms

implement a jQuery loop to dynamically apply css styles

Attempting to utilize a jQuery loop to set a variable that will vary in each iteration through the loop. The plan is for this variable to be assigned to a css property. However, the issue arises where every css property containing the variable ends up with ...

javascriptjquerycssvariablesloops

What is the correct way to display single line code snippets in Firefox?

When attempting to display a single line of code within a code block, the layout appears too close to the line numbers (this issue only occurs in Firefox): The HTML code responsible for this display is automatically generated by Hugo and appears as follow ...

htmlcss

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

javascriptjqueryhtmlcss

Use regular expressions to automatically generate HTML attributes in your styling

My ionic/angular app generates a custom tag element with a unique _ngcontent attribute on each refresh, like so: <tag _ngcontent-hgr-c2>...</tag> (1st refresh) <tag _ngcontent-agj-c7>...</tag> (2nd refresh) <tag _ngcontent-cfx-c5 ...

htmlcsscss-selectors

Repeatedly utilizing a drop-down menu

Can a <select> menu be written and utilized in multiple locations on a webpage? For instance: <select id="dm"> <option value="">Select Quantity</option> <option value="less ">50 - 60</option> <option value="me ...

javascriptjqueryhtmlcss

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss

Customize Joomla Module Styles

Here in the JhotelResrvation Module area, I've identified where the module files are located. However, I'm unable to make changes to the CSS despite trying custom CSS as well. My initial plan was to add padding to the dark-transparent box using c ...

htmlcssjoomla

Footer overlapping occurs on a single page

My webpage is having an issue where the footer is overlapping. It seems to be fine on all other pages except for this one. I would prefer not to make any changes to the footer since it's working correctly on other pages. Is there a way to adjust the C ...

phphtmlcss