In Bootstrap 4, IE 11 struggles with images overflowing within a d-flex div containing an img tag

My webpage utilizes the bootstrap 4 grid system and appears correctly on most browsers, except for IE 11. If you check out this snippet on jsfiddle in IE 11, you'll notice that the image gets stretched inside a d-flex container. How can I resolve this issue?

<div class="container-fluid">
  <div class="row py-3 justify-content-center">
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
    <div class="col-5 d-flex align-items-center">
      <img class="img-fluid" src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="col-3 bg-primary">
      This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
    </div>
  </div>
</div>
htmlcssflexboxbootstrap-4

Answer №1

Utilize the grid system that allows for 12 columns across the page with the following code:

<div class="container-fluid">
  <div class="row py-3 justify-content-center">
    <div class="col-3 bg-primary">
      This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed.
    </div>
    <div class="col-6 d-flex align-items-center">
      <img style=height:100%;width: 100%; src="https://www.example.com/image.jpg">
    </div>
    <div class="col-3 bg-primary">
      This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed. This section contains text that exceeds the length of the image displayed.
    </div>
  </div>
</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

Retrieving the value of the selected radio button

How do I access the value of a clicked radio button? I am trying to create a custom filter based on the gender selected in my <form>. However, when using the filter and orderBy in my ng-repeat, it is not functioning correctly. You can view an examp ...

javascripthtmlangularjs

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss

Node Webkit - Custom Save As Dialog Supporting Various File Formats

Is it possible to create a 'Save As' feature with multiple file format options using Node Webkit? I am looking for something similar to this desired result: https://i.sstatic.net/ifuxJ.png Currently, with native NW, I can only display two optio ...

javascripthtmlnode.jschromiumnode-webkit

Bootstrap is having trouble with aligning flex items and preventing them from wrapping to a new row

I am working on a code implementation that dynamically displays flex items, with each item taking up half of the display width. So, after two items, I need to start a new row. Is there a way to add a line break after every two items displayed on the page ...

cssflexboxbootstrap-5

Struggling to effectively customize a bootstrap theme

After incorporating a custom .css file from an internet theme that overrides some bootstrap properties, I noticed that it works in certain scenarios. However, when attempting to modify the primary color in the :root{} section of the styles.css file, the ch ...

cssreactjssassreact-bootstrap

How can one loop through multiple elements at the same time in Jsoup?

My goal is to transform an HTML page containing entries with various details (such as name, phone number, and address) into a spreadsheet. I have managed to identify each of these details as Elements, but I am struggling to figure out how to iterate over ...

javahtmlparsingjsoup

In my attempt to position Font Awesome icons alongside a button icon and create equal spacing between them, I want to achieve the layout displayed in the example

How can I align Social Icons using Font Awesome like in the example provided below? I've tried targeting the Icons but I can't seem to adjust the padding or margin. What am I overlooking? - EXAMPLE <!--BOOTSTRAP--> <link rel="styles ...

htmlcssbootstrap-4

The .fill attribute in SVG seems to be having trouble functioning as intended

Could someone please clarify why I am unable to modify the fill of this svg: <div class="container"> <ul class="todo"> <li> This is an item <div class ="buttons"> <button class="remove"> <svg ...

htmlcsssvg

Using nested quotations within HAML

I am attempting to convert my knockoutJs html code to HAML, aiming for something like this after compilation: <div data-bind="attr: { 'data-something': someValue }">...</div> My attempt in HAML is: %div{data:{bind:"attr: { 'da ...

htmlknockout.jshamlrich-internet-application

Problem with using Twitter Bootstrap in IE11 when Browser Profile Enterprise is enabled

I am facing an issue with a Bootstrap 3 web page. Some machines have IE configured to load intranet pages in Enterprise profile mode, while others have the default Desktop profile set in IE11. This configuration has caused the layout to break completely. ...

javascriptcsshtmltwitter-bootstrapinternet-explorer

What is the best way to create flexible Bootstrap 3 columns with varying heights?

I'm struggling to remove space and create a flex column .col-md-5 with varying heights. Despite trying various solutions found on Google, I still can't get it to function properly. The current outcome is not as expected. https://i.sstatic.net/fc ...

twitter-bootstrapcssflexbox

The Salvattore grid became unresponsive and malfunctioned as soon as AngularJS was integrated

After incorporating AngularJS into my project, Salvatore grid suddenly ceased to function and stopped rendering properly. I am interested in utilizing the ng-repeat feature to iterate through all items and showcase them within the Salvatore grid layout. ...

javascripthtmlangularjsangularjs-ng-repeat

How to Spin an Image in the Canvas Using HTML5

I am having trouble rotating an image inside a canvas after researching similar questions on Stack Overflow. Here's what I've learned: It seems I cannot rotate a single object inside the canvas. I can only rotate the entire canvas itself. ...

javascripthtmlcanvas

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

javascriptcssbootstrap-4

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

javascriptjqueryhtmlcssjson

What is the process for converting CSS to SASS when using arithmetics in selectors?

Is there a more efficient way to convert the following CSS code into SASS? div#block-views-news-block, div#block-views-news-block-1, div#block-views-news-block-3, div#block-views-news-block-4 { margin: 0; padding: 0; } I attempted the following: div ...

cssnetbeanssass

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

Delete a portion of the text on the button

Is there a way in HTML/JS/JQuery or CSS to search for a specific button in the document and remove/hide only the text of the button without affecting the icon? @Html.ActionLink("Edit", "Edit", new { id = -1 }, new { @class = "btn-edit" }) | ...

javascriptjqueryhtmlcssasp.net-mvc-4

Easiest way to operate three different desktop environments

Is there a more cost-effective way to have three web applications running on separate displays with user input? Each display will require users to enter numerical information into the lightweight HTML, CSS, and JavaScript web app. I've considered op ...

javascripthtmlcsshardwarehardware-interface

When a button is triggered, it should initiate a click event on an input in TypeScript

I have created a color picker that is visible on a page. When clicked, it displays a dropdown menu of colors for selection. However, my objective is to hide the color picker initially and only reveal it when a specific button is clicked. This way, the dro ...

javascripthtmltypescriptcolor-picker