Utilizing Bootstrap 4 to Position an Image Amidst Two Card Elements

Looking at the bootstrap 4 card documentation page in the Images > Image Caps section, you'll find two examples provided. In these examples, the image can be positioned either at the top or the bottom of the card block, with the .card-block div either following or preceding the image tag. I started wondering if it would be possible to insert the image in between two card blocks like this:

<div class="card-group> 
    <div class="card>
        <div class="card-block></div>
        <img src="..." alt="..." >
        <div class="card-block></div>
    </div>
    <!--Multiple Cards-->
</div>

I attempted to do so, but the output was not what I expected. While the cards had the same dimensions, the images did not align correctly in comparison to the images in the other cards. Depending on the card block content, the image would either shift upwards or downwards.

Answer №1

Try using a card-header instead of a card-block for the top content section.

<div class="card-set">
    <div class="card">
        <div class="card-header"> </div>
        <img src="..." alt="...">
        <div class="card-block"> </div>
    </div>
</div>

Check out this example Image

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

Having an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

A step-by-step guide on showcasing freshly submitted input data through Ajax

I'm having trouble with this issue! Once I submit the new input, it doesn't show up in the div. Below is my JavaScript code: $('#addVariable').validate({ rules: { variable: {required:true}} , submitHandler: functio ...

What is the best way to align a group of checkboxes to the left side of the page

I am struggling to display a group of 8 checkboxes in 2 columns with labels on the right side of the checkboxes, and I want them to be left-aligned instead of center-aligned. Despite trying different approaches with the CSS, I can't seem to achieve th ...

Adding a background color with a background image layered underneath it in CSS - here's how!

Looking to set a background color for a div, with a background image on the bottom of the same div. However, I need the background color to stop once the background image begins. Check out the example image below: ...

The player clicks once and the game is played two times

Struggling with a coding issue here. I've got some code where you click on an image and if it can be moved to the next cell, it should move. function changecell(a){ var moved=false; if(a%3 !=0) { if(ij[a-1]==0) { moved=true; ...

Implementing JavaScript to Take an Array of Integers from an HTML Input Field and Sort It

Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...

Can Selenium successfully scrape data from this website?

I am currently attempting to extract Hate Symbol data (including the name, symbol type, description, ideology, location, and images) from the GPAHE website using Selenium. As one of my initial steps, I am trying to set the input_element to the XPATH of the ...

Next.js: Out of the 3 card flips, only 1 experiences a malfunction

Gratitude to the community for always coming through with assistance. Your generosity and support are truly invaluable. As a first-time poster, I may overlook some details, so please bear with me. Embarking on my initial real project as a self-taught amat ...

Is the text in bold format or not detectable in contenteditable mode?

I am currently working on developing a custom text editor using the built-in contenteditable feature in HTML. I am trying to figure out how to determine whether the selected text is bold or not within the editor. This is what my current setup looks like: ...

Unique CSS shadow design & alternative solutions

I'm currently working on some HTML/CSS code and I am looking to implement a unique shadow effect with a custom width and height around a div element. https://i.sstatic.net/3SnXV.png Could anyone provide guidance on the most effective method to ach ...

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Currently, I'm tackling the challenges of working on my website and trying to understand JavaScript better. I am facing an issue where I want my aside menu's padding to adjust when my header shrinks in height. Furthermore, at the end of the web ...

What is the method for adding a before pseudo-element to my button element?

HTML & CSS Issue <button>Get Postion</button> Below is the CSS code for styling a button: button { padding: 1rem; background-color: red; color: wheat; border: 4px solid yellowgreen; position: relative; cursor: pointer; ...

Store a video file on your device's memory

Currently, I am storing simple strings in local storage. However, I am now facing the issue of wanting to save videos and images to local storage. Due to the limitations of localStorage supporting only strings, I am unsure of how to achieve this. If you h ...

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Click here to view the image I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the backg ...

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

What's the best way to search through various addresses for the source in an image tag?

In my current Laravel 5.8 project, I am faced with the task of searching through three different image sources for an img tag. First, I attempt to load the image from "". If that fails, I try a second URL like "". Should both attempts be unsuccessful, I th ...

Difficulties experienced when attempting to position content following the conversion from flash to html5

Before, I used a flash file within a tag to center it on my Wordpress Website. Now that I have converted it to html5 to serve content to Android browser users, I'm having trouble aligning the content in the center of the page for both Desktop and Andr ...

Retrieving information from CRM online utilizing the Web API

Recently, I developed a webpage to serve as a survey for end users to provide feedback on the helpdesk technician's performance in resolving tickets. The webpage was constructed using HTML, CSS, JS, and PHP. Currently, the page requires access to two ...

Adjust the input and transition the UI slider

Currently, I am facing an issue with two sliders and inputs. When the number in the top slider is changed, the number and slide in the bottom block do not update accordingly. What steps should I take to address this? $(document).ready(function() { var $ ...

Differences in Cross-Browser Styling for ListView Item Templates

I'm following up on my previous query regarding ListView's ItemTemplate table styling. I am still working on achieving the desired look for the ItemTemplate: ______________________________________________ | |___________Title_______ ...