I'm doing a website that will be mostly displayed on a mobile.
I'm using bootstrap 4.
Currently I'm trying to display an element that has to be "vertically" centered in the available space.
By this I mean: I've a title, which use a fixed size, and I've one message + 2 button in a div that I need to display in the vertical middle of the available space(without overflow).
I found this: vertical-align with Bootstrap 3 --> the bootstrap 4 snippet doesn't work
One other answer which was about flexible box was promising, but it seems that if I have only one component that should use all the remaining space it doesn't work.
Also, one thing; the element that I need to have vertically aligned is displayed through a jquery call:
$('#btToShow').click(function(){
$('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});
$('#change-choice').click(function(){
$('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Some page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
</head>
<body>
<H1 class="text-center page-header">Somelist</H1>
<div id="card-container" class="container show center-block">
<div id="card-subcontainer" class="row center-block">
<!-- Here there is normally a lot of buttons -->
<button class="btn" id="btToShow">Show</button>
</div>
</div>
<div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
<h2>This is the part that is absolutely not vertically aligned</h2>
<div>
<button class="btn btn-primary btn-lg">Wait for it...</button>
<button id="change-choice" class="btn btn-danger">Change the choice</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>
</html>
Any idea how I can align the content of #wait-for-result-container vertically in the middle?
You can vertically center content with flexbox
#wait-for-result-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
codePen
To fadeIn with display: flex
$("#wait-for-result-container")
.css("display", "flex")
.hide()
.fadeIn();
This method works really well for Bootstrap 3.x:
#wait-for-result-container {
position:absolute;
left:0;
right:0;
top:50%;
-webkit-transform:translateY(-50%) !important;
-ms-transform:translateY(-50%) !important;
transform:translateY(-50%) !important;
}
top:50% sets the position of the div 1/2 way down the container, then transform:translateY(-50%) shifts it back up half the distance, making a nicely vertically centered object relative to the parent container.
You could just position it absolutely:
#wait-for-result-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
$('#btToShow').click(function(){
$('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});
$('#change-choice').click(function(){
$('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});
#wait-for-result-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Some page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
</head>
<body>
<H1 class="text-center page-header">Somelist</H1>
<div id="card-container" class="container show center-block">
<div id="card-subcontainer" class="row center-block">
<!-- Here there is normally a lot of buttons -->
<button class="btn" id="btToShow">Show</button>
</div>
</div>
<div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
<h2>This is the part that is absolutely not vertically aligned</h2>
<div>
<button class="btn btn-primary btn-lg">Wait for it...</button>
<button id="change-choice" class="btn btn-danger">Change the choice</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>
</html>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I have some text (p element) and two buttons next to it. However, both buttons dont look center aligned horizontally at the same level as the text (p element). The buttons seem slightly below the text.
How to make them look like they are on the same level horizontally?
Code snippet:
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="timer">
<p id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>
<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Use 'vertical-align' and adjust the default 'margin-bottom' of the 'p' tag.
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
vertical-align: middle;
margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="timer">
<p id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>
<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
wrap p tag in d-flex class & align-items-center
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="d-flex align-items-center" id="timer">
<p class="mb-0 mr-1" id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg mr-1">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>
<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
The modern way of doing things like that is to use Flexbox. Check out a basic tutorial on Flexbox here: https://www.w3schools.com/css/css3_flexbox.asp
And an excellent game that helps to learn Flexbox here: http://www.flexboxdefense.com
Essentially you wrap your items within a div that has a class with the property display: flex; applied.
Then each of your items within will appear horizontally on the screen. You can use align-items: center; to get the correct alignment and justify-content: space-between; or justify-content: space-around; to spread the items across the row nicely.
So your #timer block would look something like:
#timer {
margin-top: 1%;
display: flex;
align-items: center;
justify-content: space-around;
}
I'm totally new to Bootstrap.
I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div.
I've tried to use .mx-auto, margin: 0 auto and other usual methods I know of. I'm running out of otions here.
Can anyone advise me on this.
here is a fiddle for my code
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
}
.brand-text{
font-size: 2em;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
As per my understanding,you want to align a tag to vertical and horizontal center inside <div class="banner-logo"></div>. For this you can use bootstrap 4 classes mx-auto and my-auto for the <div> that wraps <a> tag
.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
There are multiple ways for vertical alignment.
You can do by giving position absolute, make the parent div position relative.
Here is the Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.bg-banner {
background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 20vh;
}
.banner-logo {
background-color: red;
height: 20vh;
position:relative;
}
.banner-logo a
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.brand-text{
font-size: 2em;
color: white;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
You can skip mx-auto and my-auto for that fix, text-center and padding will do the work for you. Check this solution, it's simple. Hope it'd help
.banner-logo{
background-color: red;
padding: 10px 0;
}
a.brand-text{
text-decoration: none;
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 banner-logo text-center">
Webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
</body>
</html>
So i am trying to put a very light color on top of img or the parent div of the image so that what ever the image is , light or dark the text will be visible clearly without any problem. As you can see i am using bootstrap card class to have the text over image also. This is my attempt so far, but having this opacity is making the text and image dimmer, I wanted the image to be dimmer/lighter so that text is strongly visible. Whats a good solution here. I seen people using a transparent background color as image and overlaying it css, I dont know if thats a good approach
.dnow-regionsContent {
background-color: SlateGray;
position: relative;
width: 100%;
height: 100%;
opacity: 0.8;
}
.dnow-regionsContent .card-img-overlay img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<button class="btn btn-primary">
Viewl all Location
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
I don't know if I understand the question, but from what i understand you want to apply an overlay color on top of the image so the image became dimmer.
If that this solution may help you
create a new div
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="overlay-div"></div> <!-- the new div -->
<div class="card-img-overlay d-flex align-items-center container">
and apply some css styles
.overlay-div{
height:100%;
width: 100%;
position:absolute;
background-color:#000;
opacity:.7;
}
there is a pen file you can try it img overlay color
I created a cta with image and text overlay using the bootstrap card-img-overlay class. Also added a div with dark low opacity to make the text brighter. Everything work good on all browsers except IE 11.
Q1:
where is the column width breaking in IE, i don't think its my css that's
causing this part. is it a known bootstrap 4 issue?
Q2:
how to fix the overlay div to show on top of the image like chrome and other browsers. Is there a better approch that works for both?
broke IE IMAGE
Chome and other browsers that are working good
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
}
.dnow-regionsContent img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="overlay-div"></div>
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<p class="">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
The actual reason:
It's not col-sm-12, but the d-flex on card-img-overlay which makes your design look not proper in IE.
Why?
When display:flex is applied to an element, the immediate child (i.e. the flex items) would need some width to be specified or else they would not expand or take up enough space as we require unless content is not sufficient enough.
In your case we have d-flex along card-img-overlay so the immediate child (i.e. flex item) of it .row, would not be having 100% width. Now for col-sm-12 column, 100% would be full horizontal space that is with its parent (.row) which is not itself wide enough. That's the real issue here.
Solution:
Give 100% width to .row, you may use class of Bootstrap 4 w-100.
This could have been the real solution to your issue/query but few things are still needed to get the look you want, as you have it in other browsers.
Giving position: absolute does not work alone, the smart browsers would know what to do, but the other ones would need offset values like top & left. In your case with value as 0.
Finally image with actual dimensions to attributes width and height of <img> tag, here in your case it would be width="1200" & height="800".
So basically bootstrap has nothing to do with this issue, it's just the flow of markup and CSS properties.
Side Note:
I hope the above steps helped you to clear issue or understand it. I would suggest to always have width and height attributes for an <img> tag so that the browsers(old ones) would know to make that specific size of the block on a page.
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
/*Added*/
top:0;
left:0;
}
.dnow-regionsContent img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" width="1200" height="800" alt="">
<div class="overlay-div"></div>
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5 w-100">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<p class="">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
It was not you, it was IE.
Hope this helps you!
I've not got anyway of testing IE.
But i've used your example and taken it to the grass roots of Bootstrap 4.
I have modified your css and html to use :before to overlay the image with your black opaque style. I apply this on .card-img-overlay and any child elements will naturally appear above the :before pseudo style.
HTML
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" class="card-img" alt="...">
<div class="card-img-overlay">
<div class="container h-100">
<div class="row h-100">
<div class="col align-self-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
</div>
SASS/CSS
.card-img-overlay {
overflow: hidden;
&:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: #000;
opacity: 0.3;
}
}
Try this fiddle in IE... https://jsfiddle.net/joshmoto/xm4ude0L/
If this still doesn't work in IE still then you are going to have to be old school and find a work around. If it was me, I would output a browser body class, and control the problem for the IE users using css. You have not mentioned how you generate your html so I cant advise on a browser body class function.
Or just use browser happy to promote better ways of web browsing to force visiting users to up their game and get with the times :)
You have a lot of unnecessary stuff going on here.
Here is a snippet that works in IE.
Also for whatever reason your img link did not work in IE, so I replaced it with another image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://cdn2.outdoorphotographer.com/2018/04/DShow_Echoconfl-824x548.jpg" alt="">
<div class="card-img-overlay align-items-center d-flex">
<div class="card-body ">
<h2 class="card-title">
Canada
</h2>
<p class="card-text">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</section>
<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>
Bootstrap 4 uses the flex property for the column. This property as far as I know is not entirely compatible with IE. Also IE was discontinued by Microsoft, I would not worry about giving support.
I have an image that want to be responsive to the container size.
The parent container (cover-photo) has a height of 180px.
The image has a height of 853px. However when using img-fluid, the image does not keep the container height of 180px instead it keeps its own height of 853px.
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.cover-photo {
height: 180px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="cover-photo">
<img class="img-fluid" src="http://newlovewallpapers.in/images/hd-love-images-and-wallpaper/hd-love-images-and-wallpaper-11-1280.jpg" alt="Background profile">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
<script src="js/parallax.js"></script>
</body>
</html>
I understand that img-fluid in Bootstrap is max-width: 100%; and height: auto; and are applied to the image so that it scales with the parent element. But in this case it does not scale to the parent height.
Any insights? Thanks!
Good morning
You need to give following CSS to img-fluid class
.img-fluid {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}