Adaptable image display in Bootstrap 4

Having an issue with responsive images in Bootstrap 4.0. Used class="img-fluid" but it doesn't seem to be functioning.

Checked using a Chrome add-on on another device (iPhone 4) and the image did not scale with the device's monitor.

https://i.sstatic.net/i849w.png

Here is the code snippet:

<!doctype html>
    <html lang="en">
    <head>
    <title>Phone List Screen</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
    <div class="container-fluid">
        <div class="row border border-primary mt-1 ml-1 mr-1 rounded">
            <img src="img/PET.png" style="width: 8rem" class="img-fluid float-left pb-2">
            <div class="col-md-6 text-center text-danger">
                 <h5 class="font-weight-bold">PET PHONE STORE</h5>
                 <h5>Address: 42 Pham Ngoc Thach, Ward 6, District 3, HCM City</h5>
                 <h5>Phone: 0907.888.511</h5>
            </div>
            <div class="col-md-6">      
            </div>
        </div>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Desired look for the image:

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

csshtmlbootstrap-4

Answer №1

To enhance the structure, enclose the image within an additional div INSIDE the .row div, as shown below:

<div class="container">
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="my-image.jpg" />
        </div>
    </div>
</div>

Keep in mind that while the .col class is optional, using it can help with aligning elements when working with containers and rows.

Answer №2

Incorporate the img tag within a div and assign the class "img-fluid float-left pb-2" to the div instead of the img itself.

Additionally, utilize col-6 for the second div.

View the fiddle here:https://jsfiddle.net/3f5ke0c2/ 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row border border-primary mt-1 ml-1 mr-1 rounded">
    <div class="img-fluid float-left pb-2">
        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"
        style="width: 8rem">
    </div>
        <div class="col-6 text-center text-danger">
             <h5 class="font-weight-bold">CỬA HÀNG ĐIỆN THOẠI PET</h5>
             <h5>Địa chỉ: 42 Phạm Ngọc Thạch Phường 6 Quận 3 TP.HCM</h5>
             <h5>Điện thoại: 0907.888.511</h5>
        </div>
        <div class="col-md-6">      
        </div>
    </div>
</div>

Answer №3

Experiment with this snippet in your CSS:

.image-responsive {
    max-width: 100%;
    height: auto;
}

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

JavaScript: Choosing an element by class within the current row using jQuery

One of my tasks involves generating a table with values fetched from a database. The column totals are displayed at the end of the table. I am looking to provide users with the option to remove specific rows they do not wish to see, and have the total auto ...

javascriptphpjquerymysqlhtml

Eliminate the mystery overflow in your CSS styling

My website is experiencing overflow on the x axis, even though all vw/width properties are set to 100. I suspect that the .logout element may be causing this issue, but I'm not sure what exactly needs to be modified to resolve it. Any assistance would ...

htmlcss

Solving the problem of the fixed header in bootstrap tables

With bootstrap, I am attempting to make a fixed table header that does not scroll along with the content. Can someone assist me in achieving this? Here is a snippet of my code: This is my code: <div class="widget-content"> <div clas ...

csstwitter-bootstraphtml-tabletableheader

Revamping the back button functionality to redirect to a different location

As I face a situation where I need to modify the browsing history dynamically, consider this scenario: I am currently on my page: http://mysite.example.com and then I navigate to another page by clicking a link: http://mysite.example.com/sports Upon clic ...

javascripthtmljqueryjquery-events

Leveraging Vue properties within CSS styling

I am looking to utilize Vue data/prop variables within the <style> tag located at the bottom of my component. For example, suppose I have a component structured like this: <template> <div class="cl"></div> </template> < ...

javascripthtmlcssvue.js

What are effective methods for stopping browsers from caching an image?

Is there a way to prevent one specific image on my website from being cached? This particular image is utilized as a background in CSS and its name cannot be altered dynamically. Any suggestions on how to address this issue? ...

phphtmlcss

unable to get highcharts to redraw and reflow properly

I am currently working on creating a dynamic page that can display between 1-4 graphs. These graphs need to be able to resize when added or removed from the page. However, I have encountered a major issue with resizing the graphs after resizing the contain ...

javascriptjqueryhtmlcsshighcharts

`Troubleshooting Problems with HTML5 Video Playback on Mobile Safari`

I have encountered a unique situation: Currently, I am developing a "kiosk" application in Safari that features two videos. One acts as a screensaver while the other is supplementary. The screensaver video loops perfectly using: (done on body onload="init ...

htmlmobile-safarihtml5-video

What is the best way to add bind-attr class to an existing class in Ember framework?

Is there a way to add a dynamic CSS class onto an initial static one using the {{bind-attr}} method? The problem I am facing is that when there is a static initial class, the dynamic class does not get added when the page loads. However, once I change the ...

csshtmlember.jsbindingattr

Having trouble with ReactJS not fully rendering Bootstrap 4 components

I recently came across a Bootstrap 4 template for a navbar with login functionality on this website and decided to convert it into code. Here is the resulting code: import React, {Component} from 'react'; class HeaderComponent extends Component ...

reactjsbootstrap-4

Controlling JS, CSS, and images with CakePHP 2.5 through the Cake controller

Currently, I am developing an application using the powerful combination of CakePHP and AngularJS. During my work on the AngularJS side of the project, I noticed that we are generating a large number of JavaScript and HTML files. I am interested in havin ...

javascripthtmlcssangularjscakephp

Avoid conflicts by using a selector for styling in the jQuery plugin

I am a beginner to jQuery and recently created a plugin using jQuery UI widget factory. The plugin is functioning well, but I have been using inline styling which may become complex for larger files. For larger projects, I have the option to use classes. ...

javascriptjquerycssjquery-uijquery-plugins

Tips for dynamically adjusting image size while maintaining its aspect ratio using javascript

I am trying to achieve image resizing and displaying functionality using Javascript without jQuery. I currently have a "file" input with an onchange event that triggers a function called readURL. Although the current implementation resizes and displays the ...

javascriptjqueryhtml

JavaScript Date Validation: Ensuring Proper Dates

I am working with a date string that is in the format of "DD-MM-YYYY" and have successfully validated it using this code: var dateFormat = /(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[012])-\d{4}/ ; if(!startDate.match(dateFormat)){ alert("'Start Dat ...

javascripthtmlvalidation

Is there a way to efficiently integrate text from a webpage into a "Twitter Share" button automatically?

I have a cool feature on my website - a random quote generator where users can tweet the current quote at the click of a button. I've set up a Twitter share link using jQuery that dynamically updates with each new quote: $('.twitter-share-button ...

jqueryhtmltwitterhyperlink

What's going on with this unresponsive button in the login system?

I am facing an issue where my code does not respond when I click the login button with the correct login details. Following some suggestions from the comments, I have modified the code to include an onClickHandler function. However, I am unsure which arg ...

javascripthtml

Angular 7: Easily Mark All Fields as Touched in Template-Driven Forms

When working with template-driven forms in Angular 7, I encountered a challenge with marking all fields as touched when the user blurs out of the last required field. Currently, I am manually passing each field to mark it as touched, which is not ideal. I ...

htmlangularformsvalidationangular-material

Developing JavaScript regular expressions with exclusions within a specified range

The regular expression I am currently using ... var my_var = new RegExp('^[a-zA-Z0-9 ]+$') ... This regex selects characters a-z, A-Z, 0-9, and space while excluding all other characters. However, I now want to include '(', ')& ...

javascripthtmlarraysregexajax

Is there a variance in window.innerWidth between Chrome and Firefox?

body, html { position:absolute; width:100%; height:100%; margin: 0; padding: 0; overflow: hidden; } When using window.innerWidth, there is a discrepancy between the values returned by Firefox and Chrome. Firefox return ...

javascripthtmlcsswidth

Why are all links broken and the mobile menu disappeared after installing featherbox gallery?

If you want to see for yourself, here is the link. I can't figure out why my website has suddenly lost functionality on this specific page. None of the links work, except for the home and contact (the non-expandable ones). The navigation menu seems ...

jqueryhtmlcsslightbox