The aligning properties of Bootstrap and compatibility with Internet Explorer

In my current setup, I have an h1 inside a container that I want to be centered horizontally. Using Bootstrap's .d-flex and .justify-content-center classes achieves this effect, but unfortunately it does not work in Internet Explorer.

<div class="coverflow-image-title-container d-flex justify-content-center">
    <h1 class="coverflow-image-title">Title</h1>   
</div>

.coverflow-image-title-container {
  position: absolute;
  width: inherit;
  height: 100%;
  z-index: 1;
  transition: all 1s ease;
}

.coverflow-image-title {
  line-height: 1;
  color: white;
  font-family: "NBI Regular";
  position: absolute;
  transition: font-size 1s ease;
  white-space: nowrap;
  pointer-events: auto;
}

I need to achieve the same centering behavior for Internet Explorer as well. How can I do this?

htmlcsstwitter-bootstrapbootstrap-4internet-explorer-11

Answer №1

Take a look at this code snippet for reference:

<div class="container mt-3">
  <h2>Justify content</h2>
  <p>To change the alignment of flex items, utilize the .justify-content-* classes. Options include start (default), end, center, between, or around:</p>
  <div class="d-flex justify-content-start bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-end bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-center bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-between bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-around bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>

Here's the output when viewed in IE browser:

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

To learn more details about using Bootstrap 4 .justify-content-* classes, you can refer to this tutorial.

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

What could be causing the background color opacity of the HTML hr tag to decrease?

I am trying to modify the height and background color of the <hr> HTML tag. However, even though the height and color are changing, it appears that the background color opacity is decreasing slightly. What could be causing this issue? Here is my cod ...

htmlcssbootstrap-5

Distinguishing appearances among various web browsers

How come the menus look different in Firefox compared to Chrome, Safari, and IE? I've tried adjusting the CSS but can't seem to get it just right. Any suggestions on how to fix this? In Firefox, there's an overlapping part at the bottom of ...

htmlcss

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

Python: HTML regex not finding a match

This is the code snippet I am struggling with: reg = re.search('<div class="col result_name">(.*)</div>', html) print 'Value is', reg.group() The variable 'html' holds content like this: <div class="c ...

pythonhtmlregex

Enhance the functionality of the button by implementing AJAX with the use of data

I am currently working on implementing an update function without using forms. Instead, I am utilizing data-* attributes and ajax. My goal is to prevent the button from triggering after updating the values. However, I am facing an issue with my script as ...

javascriptphpjqueryajaxhtml

Ways to enlarge an image while hovering the mouse over it without disrupting the positions of other images (JQuery)

Is there a way to achieve a similar effect to Google Images, where the image pops and comes in front when we mouse over it without affecting the positions of other images? This should only happen when the cursor is still and not moving around randomly. I ...

jqueryhtmlcss

Missing HTML escape sequences following conversion to a string

The Android test was successfully run using the following code: public static void test() { String text="<html>" + "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\" /> ...

javaandroidhtmldom

Encountering a malfunction in executing the AngularJS controller file

In the project run with http-server and node.js, the angular controller is unable to connect with index.html. classifieds.js (function() { "use strict"; angular .module("ngClassifieds") .controller("ClassifiedsCtrl", ['$scope', ...

javascriptjqueryhtmlangularjs

What causes a CSS class to have priority over another?

I've encountered a challenge in my Vue.js project where I'm utilizing Vuetify and vue-flash-message. My goal is to change the warning message background to 'blueviolet' by adjusting its style: .flash__message.warning { color: #ffffff ...

cssvue.js

Do not use Express.js to serve the index.html file

Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...

javascripthtmlnode.jsexpressnpm

Is your CSS font italic shorthand not functioning properly?

I attempted to add italic styling to text using the font shorthand property. This is what I currently have: font: 36px italic normal Georgia; However, the italic styling is not being applied. When I specifically set font-style: italic;, it does work. ...

css

Ways to verify the checkboxes during AJAX reload

After adding checkboxes to an AJAX response, I encountered an issue where these checkboxes cannot be checked. I understand the reason behind this problem, but I am unsure how to resolve it. I have attempted document.on(),live(), delegate() but unfortunat ...

jquerybootstrap-4

The AdminLTE Bootstrap Table Search Bar vanishes when extra <th> tags are added

Currently facing difficulties with the table functionality in AdminLTE. By default, AdminLTE includes a search and organization feature in its table structure. When I insert some table data using PHP, everything looks fine. However, when I attempt to add ...

javascriptphpjquerybootstrap-4adminlte

The menu content has a 50% chance of appearing when the open menu button is clicked

Hey there, I'm currently facing an issue with a menu I created that slides open to the bottom when a button is clicked. The problem I'm encountering is that the content of my menu only appears about half of the time... I'm not quite sure how ...

jqueryhtmlcssdrop-down-menu

Generate a secondary table row by utilizing the ::after pseudo-element

I need to add a sub-row to the last row of the table to achieve the look shown in the photo. I am attempting to use pseudo-classes for this purpose, but I am struggling with adjusting the height of the 'tr' element to accommodate the new content. ...

htmlcssbootstrap-4

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

bootstrap class not detected and not visible in Firebug

I have been delving into a book about bootstrap in order to master it. Upon downloading the bootstrap files and integrating them into my test file, test.html, I encountered an issue where the "navbar-toggle" class was not recognized by my browser and did n ...

htmlcssbootstrap-4

Initializing an HTML5 video player directly from an Array

I am trying to populate a video player on my webpage with an array of videos. Here is the code I have so far: var current = 0; var videos = ["01", "02", "03", "04"]; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomInde ...

javascriptarrayshtmlvideodynamic

Unique property in css without a specified value

I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword. This is the code I came up with, but unfortunately, it did not achieve the desired result: <style> .admin { color: green; enable: ...

css

I encountered a problem in my Angular form where the keycode event for F2 is not functioning properly in certain scenarios. Can anyone help me diagnose the issue

During my Angular project, I created an HTML page with a form that includes input data with autofocus. To enhance user experience, I added an event listener for the "F2" key that triggers a console message. My objective is to ensure this functionality wor ...

htmlangulartypescripteventskeycode