Tips for properly placing a Bootstrap4 card inside a designated container

I've been struggling to make a Bootstrap card fit perfectly within a container that has a fixed height. I've tried using the typical rules like max-height, but nothing seems to be working.

Check out this jsfiddle for reference: https://jsfiddle.net/aq9Laaew/263168/

Here's the code as well:

HTML:

<div class="container">
  <div class="row">
    <div class="col wrapper">
       <div class="card bootstrap-card" style="width: 18rem;">
        <img class="card-img-top" src="http://placehold.it/560x560" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      </div>
    </div>

  </div>  
</div>

CSS:

.wrapper {
  background-color: yellow;
  height: 60vh;
}

.bootstrap-card {
  max-height: 100%;
}

Any advice would be greatly appreciated!

cssbootstrap-4

Answer №1

It is recommended to utilize the min-height property in this scenario.

.container {
  background-color: lightblue;
  min-height: 50vh;
}

.card-design {
  height: 100%;
}

https://www.example.com/code-sample

Answer №2

Sharing some insight for others who may have the same question. It appears that CSS does not have the ability to effectively compress elements into a container like you can with images using max-height:100%.

However, one workaround is to set a maximum height for the image at 65vh and then utilize auto-margins (e.g., margin-top) on other elements to align them at the bottom of the container.

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

Arabic Presentation of Sweetalert Error Confirmation Icon

When using sweetalert in right-to-left (RTL) direction, the checked icon on sweetalert displays a problem, as shown below: Large image view the image here Is there any solution to this issue? Note: This problem is only visible in RTL (Arabic) direction. ...

javascripthtmlcssajaxsweetalert

Creating square elements using only HTML and CSS

This is just a longer text to demonstrate multiple lines being centered. ...

htmlcss

PHP script that dynamically highlights text based on values retrieved from a database

I have multiple small HTML tables generated by PHP on a single page, each with a unique <table id="">. The data in these tables corresponds to entries in a MySQL table with matching IDs. What I am looking for is to automatically highlight the values ...

javascriptjquerycss

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

javascriptjquerycssjquery-mobile

links to css and javascript

I am having trouble with what should be a simple task! On my webpage, I have this link: <a class='action' href='javascript:void(0)' OnClick='run()'> run </a> Along with the following CSS: .action { color: # ...

javascripthtmlcss

Utilize JavaScript to dynamically modify the position of an HTML element

I am working on a script that can manipulate the size of a period symbol, making it increase and decrease in size while staying in one place. However, I have encountered an issue where the element moves up or down the page when its size changes. I tried ...

javascripthtmlcsspadding

Is it possible to retrieve or modify the dimensions and position of an element set in a static position using only JavaScript?

Is it possible to access or modify the coordinates, width, and height of an element that is statically positioned using only JavaScript? If so, how can this be done in both pure JavaScript and jQuery? ...

javascriptjqueryhtmlcss

The GitHub Pages website is not displaying exactly like it does when running locally with a live server

Currently in the process of creating a compact website where users can input an anagram and receive all potential words that can be formed from it. Additionally, upon receiving these words, there is an option to click on one for its definitions. The site ...

javascripthtmlcssgithub-pages

Is there a way to point my Github URL to the index file within a specific folder?

The actual working location of my website: My desired working location for the site: Originally, I had my index.html file in the main repository, but later moved it to an html folder along with other html files for better organization. How can I ensure t ...

javascripthtmlcssgitgithub

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

htmlcssexpand

The innovative technique of using pure CSS to secure the bottom edge of a div to the viewport

Is there a way to keep two container divs positioned x pixels from the bottom of the viewport without using position absolute|fixed? I want them to remain as position: relative for proper DOM flow. Searching for a CSS-only solution that works in IE7+. Mos ...

css

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

htmlcss

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

htmlcss

Displaying content in Bootstrap 5 modal with jQuery may cause a delay in the appearance of a centered spinner before the content loads

In my Bootstrap 5 modal, I have implemented specific functionality in jQuery where a centered spinner is supposed to show up in the modal before loading the content. You can see a live example of this here. The issue I am facing is that the spinner takes ...

javascriptjquerycssbootstrap-5

Stopping Accordion Title from Moving Vertically in Material-UI

Just finished creating this accordion which will be used as a menu item. However, I've encountered an issue where clicking on the Main title causes the accordion summary to move downward vertically. Any suggestions on how to keep the Main tile fixed ...

cssreactjsmaterial-ui

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...

htmlcssbootstrap-4responsive-designfrontend

The icons from MaterializeCSS are not displaying correctly on the navbar within an Angular 7 project

Having an issue implementing MaterializeCSS Icons on the navbar. The arrow-drop_down icon is not displaying correctly, showing only text instead. Oddly enough, the icons render properly on other pages except for the app.component.html file. I attempted to ...

javascripthtmlcssmaterializeangular7

Display two columns side by side using Bootstrap on all screen sizes

I'm attempting to have two column divisions appear on the same line. Take a look at my code: <div class="col-md-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Left Division </div> ...

csstwitter-bootstrapbootstrap-4responsive

React app experiencing an unexpected issue with horizontal scroll bar appearing unnecessarily

Currently, I am attempting to implement a carousel using react-bootstrap within my react application. The goal is to have a black background container where the carousel will reside, similar to this illustration Desired Container However, upon creating t ...

cssbootstrap-4react-bootstrap