Positioning elements to the right inside a Bootstrap 4 thumbnail behaves in a unique way when compared to Bootstrap

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
</div>

This particular code snippet is from an HTML file using Bootstrap 4 CSS. It displays an image inside a styled box. Adding an h4 heading places it below the image, still within the box.

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
    <h4>filename:a.jpg</h4>
</div>

However, when attempting to align the heading to the right using either the Bootstrap .float-right class or inline style style='float:right', the element shifts to the right but goes outside the thumbnail box. Assistance is needed to resolve this issue.

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
    <h4 class='float-right'>filename:a.jpg</h4>
</div>

In Bootstrap 3, the .pull-right class was used for similar alignment, ensuring the element stayed within the thumbnail box on the right side.

Here's the full code:

<div class='container'>
 <div class='row'>
  <div class='col-3'>
    <p class='lead'>LOL</p>
    <ul class='list-group'>
      <li class='list-group-item active'>Something 1</li>
      <li class='list-group-item'>Something 2</li>
      <li class='list-group-item'>Something 3</li>
    </ul>
  </div>
  <div class='col-9'>
    <div class='img-thumbnail'>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png" class='img-fluid'>
      <h4 class='float-right'>$9.99</h4>
    </div>
  </div>
 </div>
</div>
csshtmltwitter-bootstrapbootstrap-4

Answer №1

Have you noticed the difference in styling for img-thumbnail between Bootstrap 3.x and 4.x?

In Bootstrap 4.x:

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

In Bootstrap 3.x:

.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

The key difference is that Bootstrap 3.x used display:inline-block. To replicate this in Bootstrap 4.x, simply add d-inline-block to the img-thumbnail class...

<div class='img-thumbnail d-inline-block'>
   <img src=".." class='img-fluid'>
   <h4 class='float-right'>$9.99</h4>
</div>

View example here.

Answer №2

To easily display an image with a thumbnail effect, just include the d-inline-block class along with img-thumbnail.

Below is the example code snippet:

<div class='img-thumbnail d-inline-block'>
    <img src="a.jpg" class='img-fluid'>
    <h4 class='float-right'>filename:a.jpg</h4>
</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

Achieving fixed width and automatic height for images in Next JS: a guide

I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...

cssnext.jstailwind-css

Immediate self-invocation occurs within a JavaScript function

My goal is to dynamically create a DOM button object with JavaScript, and it seems to be happening perfectly fine. However, I'm facing an issue where if I try to assign another JavaScript function to one of the buttons, the other script triggers itsel ...

javascripthtmljspdom

Preventing automatic recompilation in Angular when there are changes in the assets folder

I am facing an issue while attempting to download a file generated from a Spring Boot application in the assets folder of an Angular project. Every time I call the Spring API from Angular services, the Angular CLI recompiles the project after creating the ...

htmlangularspring-bootlivereload

Adjusting the size based on the screen width of various devices

I'm currently working on a website that is not responsive, and I know I can make it responsive using media queries. However, this will be a significant task... I'm looking for a quicker solution to simply zoom or scale my website to match the dev ...

jqueryhtmlcss

The `class="d-none d-lg-block"` is a handy feature in Bootstrap for hiding elements

I am having trouble implementing the class="d-none d-lg-block". It does not seem to be working as expected. Here is the code that I have been attempting to use: Could you please review it and let me know if there are any errors? <div class=& ...

htmlbootstrap-4gridviewstylesbootstrap-grid

Is it possible to have 3 divs with the height of the tallest

I have a unique template that I employ for crafting responsive websites. It relies on boxes with percentage widths, floats, and clears. A prime instance can be viewed via this link. Notice how the three boxes vary in height. While it's simple to set a ...

jqueryhtmlcssweb

Positioning the footer to sit at the bottom of my webpage, leaving a pleasing margin at the top

One technique I frequently use to ensure my footer stays at the bottom of my page is by utilizing an empty div. Here's how the code looks: <body> <div id="canevas"> <article>My website's content</article> ...

htmlcssfooter

Unable to assign attribute following discovery

Can the attribute of an anchor element that is found using find() be set? I attempted this: $(this).children('a').setAttribute("href","a link"); Although it does locate the anchor element, why am I receiving an error when trying to use setAttr ...

javascriptjqueryhtml

Track user sessions and transfer username to final page

Is there a way to showcase the chosen username from a dropdown menu on the initial page and then also display it on the last page without having to pass variables between pages? Additionally, if I wish to incorporate a timer on a middle page, how can I sto ...

phphtml

Is there a way to modify the color scheme of the hamburger icon

I'm experiencing difficulties changing the color of a hamburger icon. I've searched for the specific code responsible for the color change, but I haven't been able to locate it. Ideally, I want the color to be white, but on small screens, i ...

javascriptphphtmlcss

Is it possible to toggle between hide and show functions using Jquery?

I have a question about two jquery functions that I've been struggling with. $(document).ready(init); function init() { $(".alphaleft").hover(function (g) { $(".boxy,.yee").show(); }, function (g) { $(".boxy,.yee").hide(); }); } ...

javascriptjquerycss

Ways to incorporate a smooth transition between the opened and closed fab functionality

I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation: <div id="fab-button"> <v-speed-dial v-mo ...

cssvue.jsvuetify.jsfloating-action-button

Modify the textfield label color using Material-UI

Hey there! I'm running into a little issue when trying to change the color of the text label in a MUI text field. I've successfully customized the border colors and hover states, including the label, but for some reason, I can't seem to get ...

cssmaterial-uijsx

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

The output of new Date() varies between app.js and ejs

app.get("/test",function(req,res){ var d = new Date(); res.send(d); }); When I access mydomain/test, it displays the output "2019-03-19T04:50:47.710Z" which is in UTC. app.get("/testejs",function(req,res){ res.render("testejs");}); Below is the content ...

javascripthtmlnode.jsexpressejs

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Ways to enhance widget titles with borders on Blogger

As a Blogger user, I am looking for guidance on how to add a border around the title of each widget/gadget. When I place widgets such as About Me, Follow Us, etc., in my sidebar, I want them to have borders like in this image. While I know how to customize ...

htmlcsswidgetblogsblogger

Angular 5 and Bootstrap card with enhanced double-click functionality

I want to design a Bootstrap card that can trigger two of my custom methods. <div (click)="TEST1()" class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <button (click)="(T ...

htmlangulartypescriptbootstrap-4