The Bootstrap element's height and width properties are not functioning as expected

I created three bootstrap cards with images and descriptions underneath. To ensure uniformity in size, I included height and width attributes for the images. However, there seems to be a bug as the properties are not working correctly, resulting in the images appearing in different sizes. Below is the code snippet that I used.

Could anyone identify what the issue might be?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="img/sigiriya.jpg" class="img-fluid" height="500px" width="500px" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <h4 class="card-title">Card with waves effect</h4>
        <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-indigo">Button</a>
      </div>

    </div>

  </div>

  <div class="col-lg-4 col-md-6">

    <div class="card">

      <div class="view overlay hm-white-slight">
        <img class="img-fluid" src="img/nuwara_eliya.jpg" alt="Card image cap" height="500px" width="500px">
        <a>
          <div class="mask"></div>
        </a>
      </div>


      <div class="card-block">
        <h4 class="card-title">Classic card</h4>
        <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">Button</a>
      </div>

    </div>

  </div>

  <div class="col-lg-4 col-md-6">

    <div class="card">

      <div class="view overlay hm-white-slight">
        <img src="img/ella.jpg" class="img-fluid" height="500px" width="500px" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <div class="card-block">
        <h4 class="card-title">Card with waves effect</h4>
        <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-pink">Button</a>
      </div>

    </div>

  </div>

htmlcss

Answer №1

Feel free to utilize the following code snippet as it is functioning perfectly.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="b.png" height="500" width="500" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card with waves effect</h4>
        <!--Text-->
        <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-indigo">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="profile.jpg" alt="Card image cap" height="500" width="500">
        <a>
          <div class="mask"></div>
        </a>
      </div>


      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Classic card</h4>
        <!--Text-->
        <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">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="profile.jpg" height="500" width="500" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card with waves effect</h4>
        <!--Text-->
        <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-pink">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

Answer №2

We have the flexibility to customize images based on our own preferences by eliminating the class="img-fluid" attribute.

Answer №3

  • The img-fluid class is designed for Bootstrap v4, however you have included CDN v3
  • By applying max-width: 100% and height: auto, img-fluid ensures there is no conflict with the width and height of HTML attributes. You can use browser debugging tools to identify any additional styles being applied.
  • To prevent style conflicts, it is recommended to use CSS for setting the width and height of your images.

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

Is it possible to incorporate HTML templates into other HTML templates?

Imagine a scenario where we have a web application that allows users to schedule appointments. Each appointment follows a standard block-like display template, which is quite simple: <div class="appt"> <div class="title">Encounter strange ...

phphtmltemplatesdry

The HTML Email Template fails to incorporate certain CSS styles

When attempting to create an HTML Email template that includes a button with a link and has a maximum width with consistent margins on both sides, I encountered some issues. While certain parts of the CSS were applied correctly, others were not displaying ...

htmlcssemail

Simultaneously Extracting Multiple Elements with JSOUP

Is there a way to extract both "Android Developer" and "NBC Corp." from the following code snippet at once? <div class="container "> <h2 class="job"> <a href="/work/android-developer/madrid/1 ...

javaandroidhtmlparsingjsoup

Why does the JSON loader in Three js work in the example but not in my own code?

Attempting to import a model with animations from Blender into Three.js is my current task. I am following the steps outlined in After downloading the code, I noticed that the author uses: var jsonLoader = new THREE.JSONLoader(); jsonLoader. ...

javascripthtmlthree.js

Using EJS Tags within an external CSS file

I have been working on refactoring a Node.js project, and I currently have my CSS code within my .ejs file. I need to incorporate some dynamic data into my CSS file. It works fine when the CSS is within the EJS file. However, when I move my CSS to an exte ...

cssnode.jsejs

What is the best way to adjust the position of an image background within a container without affecting the container's own placement?

While working on a registration form, I encountered an issue with moving the background image within a container. Despite adding position: relative and using top: with a negative value to shift the image, the entire container moved instead of just the back ...

htmlcssbootstrap-5

Troubleshooting a problem with HTML table styling

Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...

htmlcss

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...

javajavascripthtmltomcatstruts2

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

Struggling to find and interact with a button element, however Selenium Webdriver is throwing a NoSuchElementException

After experimenting with various selectors and attributes in an attempt to target and click a sign-up button on a website's homepage, I have been unsuccessful. The website in question can be found at: When the webdriver is initiated, all actions are ...

javascriptpythonhtmlcssselenium-webdriver

Attempting to execute an onclick event by clicking on a link is not functioning properly

Hello there, I created an HTML link <a href="javascript:void(0);" onClick="next(1)" id="next"></a> When I click on it, nothing happens. Using href="#" doesn't work either. Strangely, if I call next(1) in the console, it works. ...

javascripthtml

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

How can I prevent a repetitive div from appearing in a JQuery show/hide function?

Whenever I trigger my AJAX function, the loading image keeps repeating every time I click on the next page. I want to prevent this repetitive loading image and only display it once when I go to the next page. To address this issue, I created a <div cla ...

javascriptjqueryhtmlajax

Issues with hover functionality on top navigation bar (CSS)

I encountered an issue with my HTML file. Being new to HTML, while creating a topbar for my static website here, I attempted to add a hover effect to it. However, the hover effect is only working correctly on the "search" and "cart" buttons (and partially ...

htmlcsshover

Why doesn't the z-index of child elements function properly when their fixed parents share the same z-index value?

I have utilized jsfiddle to replicate my problem. My goal is to position .top .inside above .bottom .inside. I am aware that z-index only functions within its respective position type, for example fixed and absolute do not share the same z-index level. How ...

javascriptjqueryhtmlcss

How can you ensure that a row of content is accessible by making it clickable in a valid way?

I'm currently working on developing a widget that resembles a clickable bootstrap media object list that is easily accessible. https://getbootstrap.com/docs/4.3/components/media-object/#media-list The original code has the JavaScript click event attac ...

htmlbootstrap-4accessibilityclickable

Struggling to manipulate the transparency of an image contained within a div element

I am struggling to achieve the desired effect of having an opaque image inside a transparent div. I have tried setting the opacity for both the image and the div, but it doesn't seem to be working as expected. Here is my jsFiddle Link for reference: ...

htmlcssopacity

Continuous clicking on navigation items with Angular JS ui.router causes looping navigation

In our current project, we have implemented ui.router for routing purposes. However, we have encountered an unusual problem where clicking on navigation items in quick succession causes all the pages to enter into a loop and never stops until it crashes. ...

htmlangularjsangular-ui-router

Tips for concealing the edges of a scroll bar while utilizing scroll as overflow

Basically, I have a div that is positioned absolutely and has multiple children elements. This div can be scrolled horizontally to see all its content, but the scrollbar hangs off the bottom, hiding the bottom border radius. Here is the HTML code: <ul ...

htmlcss

Display a picture within a cell of a table using Javascript

I'm currently utilizing JavaScript to generate a dynamic table that displays data parsed from a JSON object. I'd like to include an image in one of the cells directly from the JSON object using HTML code, such as: jsonObject[0].Image = <img s ...

javascripthtmljson