Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below:

.hero{
  background:lightgrey;
  padding: 50px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="hero">

  <div class="container d-flex align-items-center">
    <div class="row">
      <div class="col-12">
        <div class="text__wrap d-flex flex-column">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
        </div>
      </div>
    </div>
  </div>

</div>

Although the columns display correctly in Chrome and most other browsers, they do not span the .container in IE11.

I've tried using the following CSS without success:

.text__wrap{
  flex-basis: 100%
  /* flex: 1
  width: 100%; */
}

Can anyone help me identify where I am making a mistake?

htmlcssbootstrap-4internet-explorer-11

Answer №1

There appears to be an issue with the d-flex property. You can try fixing it by removing the d-flex from the .container div.

Here is the code snippet in question:

<div class="hero">

    <div class="container align-items-center">
        <div class="row">
            <div class="col-12">
                <div class="text__wrap d-flex flex-column">
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
                </div>
            </div>
        </div>
    </div>

</div>

The expected outcome after making the necessary changes would be:

https://i.sstatic.net/43oJa.png

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

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

javascriptjqueryhtmlcssless

Unable to access accounts due to malfunctioning login feature in PHP

Hey there, I'm facing a bit of an issue with this code. It works perfectly on my local WAMP server, but when I uploaded it to a GoDaddy-hosted server, it stopped working. Surprisingly, it worked on another server from a different hosting company. I&ap ...

phphtmlauthenticationserver

Creating a menu header similar to Gmail's design is a great way to

How can I create a fixed menu similar to the one in Gmail? I've attempted using CSS, but the div remains centered instead of sliding up on scroll like the Gmail menu. View in full-size image I've experimented with CSS properties, here's an ...

javascripthtmlcssgmail

JavaScript Bug Report

Currently, I am immersed in a project that encompasses various languages like HTML, JS, and PHP. While working on one of the PHP functions, I stumbled upon an unexpected anomaly. To dissect it better, I decided to break it down into simpler functions: &l ...

javascriptphphtml

Displaying XML data in an HTML table

Encountered a challenge while fetching data from an external XML document using JS. Following the w3schools tutorial for AJAX XML, but faced an issue I couldn't resolve. The XML structure is as follows: <root> <document-id> <author ...

javascripthtmljqueryajaxxml

Having difficulty choosing a default value from the Angular dropdown menu

My goal was to create a user-friendly address form that includes a country list for users to select when filling in their address information. The form is designed using ngForm, which not only collects the address but also allows users to edit their existi ...

htmlangulartypescriptdefault-valuecascadingdropdown

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

jqueryhtmlcheckboxunobtrusive-javascript

Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...

cssangularjscheckbox

In Internet Explorer 7, there appears to be a white box that covers up the content on our website beyond a

I'm feeling stuck and frustrated trying to solve this issue. I have a Mac and no access to an IE7 machine, so I've been using browserlab (which is slow) to make any changes and see if they help. Unfortunately, I haven't been able to fix the ...

jqueryhtmlcssinternet-explorer-7wordpress-theming

Find and Scroll Dropdown Menu with Bootstrap Framework

Access the jsfiddle for more information. Have a look at these questions: In my dropdown menu, I have included a search box and multiple sub-menus. However, the search box only filters the first dropdown menu and does not work with the sub-menus. How ca ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

javascriptphpjqueryhtmlforms

What is the best way to adjust the volume vertically?

I successfully transformed my volume slider from horizontal to vertical using CSS. However, the functionality of the volume slider still behaves as if it were horizontal. In other words, I have to click horizontally to adjust the volume instead of vertical ...

jqueryhtmlcss

Displaying Hierarchical Data with AngularJS and ng-repeat

Recently, I've been working on finding an elegant solution to represent hierarchical data in my application. Specifically, I have implemented a slide effect for bootstrap badges that showcase sub-categories using AngularJS. With some guidance from th ...

javascriptcssangularjstwitter-bootstrap

information not visible on the webpage

Recently, I made an alarming discovery on my website. I have implemented two different types of menus - one for the front page (designated as .navbar-inverse) and another for all other pages (.navbar-default). The front page menu is static while the other ...

jqueryhtmlcsswordpresstwitter-bootstrap

JavaScript Audio working on local machine but not on server due to HTML5 compatibility issues

For my project, I am utilizing audio and Javascript in the following way: To start, I populate an array with audio files: var soundArray = new Array(); for (i=0; i<6; i++) { soundArray[i] = new Audio('sounds/sound_' + i + audioExt); ...

javascripthtmlaudio

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

Creating a Full-Width Form Using Bootstrap

I need help aligning 3 form boxes side by side with a total width of 100%. I want to be able to specify the width of each box, or have the last two boxes set to their default size while the first box fills up the remaining space. Here is my current code: ...

htmltwitter-bootstraptwitter-bootstrap-3

There seems to be an issue with the location.href function in the server-side code of

I'm encountering an issue in the code below where I am attempting to redirect to the login page, but it seems to not be functioning as expected. app.get('/current-pass', (req, res) => { res.sendFile(path.join(staticPath, "currentPass ...

javascripthtmlnode.jsfirebasenpm

The styles are not being rendered on the Angular application

I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...

htmlcssangularangular8

Responsive Iframe设计

My website has an issue with making the iframe responsive. The map displays correctly on a computer, but is invisible on mobile phones. I am currently using Bootstrap for the layout. <div class="container d-none d-sm-block mb-5 pb-4"> <d ...

htmlcssdjangobootstrap-5