Class for Bootstrap CSS to adjust card image when resized

I'm stumped, I can't seem to find the right CSS element to trigger the transition from displaying the image on the right to below the text. It's a simple change that I didn't anticipate, but I kind of like it.

In horizontal view, I want the image to maintain a specific size regardless of its resolution, with rounded corners on the right side.

When in vertical view, I want the image to span the full width of the card with rounded corners on the bottom.

Question: What CSS property dictates the shift from the image being on the right to below the text?

https://i.sstatic.net/68VMb.png

https://i.sstatic.net/2sSri.png

EXTRA THOUGHTS

One solution could involve separate CSS rules: one for the image on the right with fixed dimensions and rounded corners, and another for the image below the text with dynamic dimensions.

Another option is to keep the image on the right and adjust its width while letting the height expand based on the text length.

A snippet from my style.css might look like:

.image-round-right {
  width:350px;
  max-height:auto;
  border-radius:0px 5px 5px 0px;
}

.image-round-bottom {
  width:auto;
  height:auto;
  border-radius:5px 5px 0px 0px;
}
  • Choosing between 'auto' and '100%' might require some testing.

I attempted to use media queries similar to this example, but didn't see the desired changes take effect.

(original html, posted after amruth shared his answer)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <div class="container-fluid">
    <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
      <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
        <h3>Card Title</h3>
        <p class="card-text mb-auto">
          Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text.
        </p>
      </div>
      <div class="img-round-right">
        <a href="https://www.yahoo.com" title="" target="_blank">
            <img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg
                 class="img-fluid" style="width:auto;height:250px;border-radius:0px 5px 5px 0;">
        </a>
      </div>
    </div>
  </div>
</body>

Answer №1

To accomplish this, you can utilize the Bootstrap 4 Columns feature.

https://i.sstatic.net/9hnPp.png

<div class="container mt-5">
  <div class="card">
    <div class="row">
      <div class="col-md-8">
        <div class="card-body">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis maiores voluptate eius laboriosam neque accusamus, hic officia quod dicta. Saepe eum vero, quis dolore animi molestiae id commodi necessitatibus amet.</p>
        </div>
      </div>
      <div class="col-md-4">
          <img src="https://picsum.photos/800" class="img-fluid">
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/djOjbw?editors=1000

Answer №2

To achieve responsiveness, consider using Bootstrap classes such as .col and .col-sm-*. It seems like you are looking for a solution where the image width adjusts according to the screen size.

Horizontal Scenario

To achieve this, apply a specific width and border-radius: 0px 5px 5px 0;

Vertical Scenario

In this situation, set the width to 100% to allow the image to resize based on the screen size. Make sure to use high-quality images and implement media queries as needed. To round the bottom corners, use border-radius: 0px 0px 5px 5px;

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

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

Creating a Timeless Banner with the Magic of `background:url()`

I have a banner placed within a div tag that displays my banner image. I am trying to create a fading effect when transitioning to the next image, but I am struggling to achieve this. I attempted to use jQuery fadeIn(), however, it did not work as expected ...

Refresh the HTML content as soon as a modification is detected in the MySQL Database

Apologies if this sounds like a basic question, but I've hit a roadblock in my search for answers on the vast expanse of the internet... I am in the process of constructing a website that requires certain data on the page to be updated automatically. ...

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

I need help creating a navbar that displays the active site using HTML and JS code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=& ...

Proportional fluid image grid with responsive design

After implementing various media queries, I've managed to create an image grid using Bootstrap 4+ that looks great on specific devices and layouts. Here's the reference code: .cmd-three-img-container { position: relative; margi ...

What could be causing my mobile page to require two scrolls?

I've encountered a peculiar issue where users need to scroll twice or the page gets stuck on mobile devices that are less than 600px wide. I've attempted the following solutions with no success. I am a complete novice, so please excuse my lack of ...

What is the best way to set an array as the value for an HTML form input?

I am attempting to set the value of an array to an input element in HTML. When I run the following code in my browser console, it works: let between0400am0800am = [1669352400000, 1669438800000]; document.getElementById("time400am800amEveryDay"). ...

Adjusting containers for optimal display during browser zoom and resize operations

Currently, I have designed a banner using a triangle and rectangle to overlay an image. However, when the browser is zoomed in, there seems to be a gap between these two shapes. I am looking for suggestions on how to better connect or approach this banner ...

Error encountered when attempting to generate a hyperlink

Whenever I try to assign hyperlinks to each image name, I keep encountering an undefined imgitem error in the hyperlink(s). Could it be that I am incorrectly placing the <a> tags? echo '<td width="11%" class="imagetd">'; if (empty($a ...

Is there a way for me to establish a maximum word count for a paragraph?

When my paragraphs get lengthy, I only want the first 30 words to display on two lines. Is there a way to achieve this using HTML, CSS, or JS? The code snippet I tried did not work as expected. .long-text{ width: 70ch; overflow: hidden; white-sp ...

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

The significance of tabindex in CSS

Is it possible to manipulate tabindex using CSS? If so, which browsers support this feature and on what types of elements? UPDATE I am interested in capturing keydown events on a div element. After researching keyboard events on http://www.quirksmode.org ...

The enigma of HTML forms never ceases to baffle

Currently, I am enrolled in a Vue.js course and have recently delved into the topic of forms and their management. The concept posed about how the < select > tag operates has left me puzzled. Is it correct to assume that its value corresponds to the ...

The subfolder and HTML page have identical names and are not functioning properly

I recently updated my webpage by removing the .html extensions using htaccess. My website includes a page named "blog.html" and a subfolder called "blog" with additional html pages inside. RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ ...

Increase the size of the SVG area

I'm still learning how to work with SVGs, so I appreciate your patience as I ask what may seem like a simple question. Currently, I have an SVG image that resembles a cake shape. See it here: https://i.sstatic.net/tDhUL.png Take a look at the code: ...

Query the database and retrieve data using the POST method in PHP

Using the following SQL query in a link to extract information from a database <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">L ...

JQuery is not able to render Hindi content properly

I am attempting to showcase some Hindi words using JQuery because these are essential contents that need to be displayed on every page of the website. Please note that this is a static website built with HTML and JQuery/JavaScript. Below is my JS file: in ...

Uncommon Two-Toned CSS Gradients

How can I create a button that matches the attached image using CSS? I know how to achieve the border-radius, but I'm struggling with the color. Any tips? I attempted something like this: .button { border-radius: 0 4px 4px 0; background-ima ...

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...