Ensure that Bootstrap4 cards are fully stretched to a width of 100%

Does anyone know how to make Card2 and Card3 in Bootstrap4 stretch to 100% width? Card1 defines the total height, but Card2 and Card3 are not taking up the full remaining width. Card1 is already stretched, but Card2 and Card3 are inside a flex column and are not stretching. Any suggestions on how to make them stretch?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe0fbe6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-6 border">
            <div class="card shadow m-5">
                <div class="card-body" style="height:300px;">
                    <h3>Card 1</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 border">
            <div class="d-flex flex-column h-100 position-absolute overflow-hidden">
                <div class="d-flex align-items-start">
                    <div class="card shadow m-5">
                        <div class="card-body">
                            <h3>Card 2</h3>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-stretch overflow-hidden">
                    <div class="card shadow m-5 overflow-auto">
                        <div class="card-body">
                            <h3>Card 3</h3> Lorem ipsum dolor sit amet.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d190318031e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrap

Answer №1

If you want to optimize your code, consider removing unnecessary divs and make the following updates:

@media (min-width:767px) {
  .custom {
    height: 0;
    min-height: 100%;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d30302b2c2b2b42af">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6 border">
      <div class="card shadow m-5">
        <div class="card-body" style="height:250px;">
          <h3>Card 1</h3>
        </div>
      </div>
    </div>
    <div class="col-md-6 border">
      <div class=" d-flex flex-column overflow-hidden custom">
        <div class="card shadow m-5">
          <div class="card-body">
            <h3>Card 2</h3>
          </div>
        </div>
        <div class="card shadow m-5 overflow-auto">
          <div class="card-body">
            <h3>Card 3</h3> Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

For more insights on adjusting div heights, check out this related question: How can you set the height of an outer div to always be equal to a particular inner 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

Safari 5 experiences delays with JQuery and CSS3 animations

Encountering issues with jQuery animations specifically in Safari 5 on my Windows system. Struggling with a simple image fade slider that still has some flickering. The slider involves click events moving two pages at once, one active page right and the o ...

jquerycssanimationsafarilag

Chrome (on both Linux and Windows) is not compatible with CSS

Here is the code snippet I am currently working with: <style type="text/css"> div { margin: 100px auto; width: 0px; height: 0px; border-right: 30px solid transparent; border-top: 30px solid red; border-left: 30px solid red; border-bottom: 3 ...

windowslinuxfirefoxcss

What could be causing issues with my CSS/HTML on Internet Explorer, including version 9?

Utilizing modernizer and html5boilerplate's CSS, I have encountered challenges in designing and debugging for Internet Explorer. It seems that my reliance on FireBug has hindered my progress. Can someone please review my work-in-progress at and provi ...

htmlcss

Refreshing a HTML table by retrieving data from a session variable

I'm still learning the ropes when it comes to JSP, jQuery, and AJAX. I have a JSP page that utilizes a table populated with values from a List variable stored in session. Below is the code snippet: <table id="someData" class="display" width="95%"& ...

jqueryhtmlajaxjsp

How to load several stylesheets for a component in Angular 2

Struggling with my angular2 application, I encountered an issue when attempting to load multiple stylesheets for the same component. Below is a snippet of the code: import { Component } from '@angular/core'; @Component({ selector: 'my-tag& ...

csstwitter-bootstrapangularwebpackstyles

Reorganizing Bootstrap 5 columns as the screen size changes

I need to change the display order of columns in bootstrap Currently I have two columns side by side in one row like this: Col A - Col B (on all screens except mobile devices) However, when the screen size is reduced or viewed on a mobile device, I want ...

htmlcssbootstrap-5

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Currently working on integrating the angular-2-dropdown-multiselect component: https://www.npmjs.com/package/angular-2-dropdown-multiselect The component functions correctly, but I am looking to adjust its width to fit the container... I believe simply ...

csstwitter-bootstrapangular

Are you experiencing issues with the .submit() function when used in conjunction with other

Currently, I am working on a survey form that incorporates JQuery to dynamically display or hide fields based on user selections. //FORM CONDITIONALS: This script is responsible for hiding all the helpfulness radios and only displaying them when "Yes" fo ...

javascriptjqueryhtmldom

Ways to display the ChaptersButton in Videojs-Player

I'm trying to incorporate videojs (version 8.10.0) into my project and provide viewers with a way to select chapters within the video. According to the official documentation, it seems that simply including a track element linking to a VTT file within ...

javascripthtmlvideovideo.js

What is the correct way to utilize Microdata fields?

I'm finding the process of creating a list of events on a page to be a bit perplexing. Does the URL in this example represent the current page or another page you are mentioning? <div itemscope itemtype="http://data-vocabulary.org/Person"> H ...

htmlmicrodata

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

Using Phonegap with Dreamweaver CS5.5

Can anyone tell me what version of Phonegap is used in Dreamweaver CS5.5? I attempted to update the default phonegap.js file with the newest one, but it resulted in errors. Would it be wise to replace the current phonegap.js file with the latest version? ...

jqueryandroidhtmlcordovadreamweaver

Creating an organized layout with multiple bootstrap toasts in a grid formation

Is there a way to create multiple Bootstrap Toast elements side-by-side and top-to-top? For more information, visit: https://getbootstrap.com/docs/4.2/components/toasts/ <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: ...

htmlcssbootstrap-4toast

What are effective strategies to stop the generic * { … } style from overriding its parent tag?

How can I prevent my general * { ... } style from overriding the parent tag? In the given scenario, I want the text "sssssssss" to have the style text-huge. .text-huge { font-size: 28px !important; color: green !important; } * { font-size: 12px; ...

htmlcss

Best practices for organizing your Obelisk project include creating a specific folder for CSS files within

Trying to align two divs side by side using Obelisk, I referred to this post for guidance on how to do it: How to place div side by side. The solution required declaring classes in CSS. Utilizing the instructions from a tutorial (https://github.com/hansrol ...

csshaskellreflexreflex-domobelisk

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

Steps for updating the <option> selection in the third <select> menu when the second <select> menu changes, with the second menu being populated by altering the value of the first dropdown through jQuery AJAX

I'm facing a unique situation in my school management project and have been unable to find a solution online. Here's the issue: I have three <select> elements - the first one is for selecting a class, the second one is for selecting a secti ...

phpjqueryhtmlajaxselect

How can I arrange an array of strings with dates in C# or use ordering functionality in AngularJS?

I've got an array of dates in the following format: string[] arr=["08.02.2017","09.02.2017","30.01.2017","31.01.2017"] What is the most efficient method to sort this array in C# so that the order is descending? I want the data to be displayed within ...

c#htmlangularjs

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Safari browser is experiencing issues with CSS positioning

I am currently working on a website where I am using CSS to position a specific element on the page. The element is absolutely positioned and contained within a relatively positioned parent element. While it displays correctly in Firefox and IE, there seem ...

csshtmlwebkitcss-position