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.
Related
So, I've this little piece of test code where I'm trying to fit an image into the parent div as below in BS5. The challenge is that the image leaves a sizeable gap width-wise. This inspite of using .img-fluid class. Outcome attached which isn't ideal. There's a big gap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Why not write an inline css.
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
I think your col-6 that has the image inside it... It's making the thing appear just on the left side of the page?? This should work...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
Tha above only takes your normal thing and centers it on the page, I only added mx-auto to center the Div which contains your image.
You could also try col-8 col-9 col-10 to make the image bigger. It will still be fluid and extend the full width no matter how many columns wide you are. Naturally you wouldn't want it fluidly expanding larger than it's normal pixel size though.
I am following along with the exercises in the Jump Start Bootstrap (DOWNLOAD LINK https://learn.vccs.edu/courses/406438/files/108188236/preview )
In chapter 02, we are creating a grid system. I have entered the code for the index.html and style.css files to format the grid as shown in the book.
The columns in the grid need to align vertically and horizontally, however, they simply align vertically only. The column divs also do not respond to the style.css file that is supposed to format them in size and color.
Bootstrap grid example screenshot
Bootstrap grid that my code outputs screenshot
I have checked my code several times and compared it to the code in the book (which I added a download link above [Chapter 02 index.html file]) and I cannot find anything wrong with it.
This here is the code that I am using for the html and css files:
https://pastebin.com/MQWnJXvT
If anyone can take a look and give any suggestions or just managed to spot and point out a mistake that I missed, I would greatly appreciate it. I am scratching my head with this one and will probably continue to do the rest of the night.
The only issues I can think of is that I am assigning the wrong classes in the column divs or am placing the <link href="css/style.css" rel="stylesheet"> line in the wrong section.
I thank everyone in advance who has any advice or suggestions!
Your code seems to be working fine. The problem should be the link tag, set the path correctly.
<!doctype html>
<html lang="en">
<head>
<!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.col1 {
background: #5C7080;
}
.col2 {
background: #6BC0FF;
}
.col3 {
background: #E8AA4C;
}
.col4 {
background: #FF384E;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</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.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>
Hi guys I have a problem with making the col-8 and col-4 render side by side. I can't think of a good reason that it would not work. The col are supposed to work and fill the col 12.
This is the code:
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-8">
<img class="img-fluid" src="pic/Indian.jpg" alt="">
</div>
<div class="col-md-8">
<p>
This reciepie is called Tikka Masala, and its a fovrite in south India.
The orgin of this dish is unkown to me, but I suppose that I can look
into it and find out. When I go to Indian restaurants I always order
this meal because its so good. I think that every one should try this
food at some point in thier life and many will like it.
</p>
</div>
<div class="col-md-4 bk1">
<img class="img-fluid" src="pic/Indian.jpg" alt="">
<p>
This reciepie is called Tikka Masala, and its a fovrite in south India.
The orgin of this dish is unkown to me, but I suppose that I can look
into it and find out. When I go to Indian restaurants I always order
this meal because its so good. I think that every one should try this
food at some point in thier life and many will like it.
</p>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>
Please let me know if you have any idea.
Thanks!!
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
can you change any other functionality you can add extra stylesheet.
I am using bootstrap 4, and i want div in center in extra small(xs) devices.
Have a look at this
As you can see those 2 content are in left, i want those 2 div in center in xs devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luxo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="stylsheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital#0;1&family=Open+Sans:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body>
<footer class="footer-section bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="images/footer-logo.png" alt="footer-logo">
<p class="d-inline">All Rights Reserved.</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="list-unstyled list-inline mb-0 mt-3 float-md-right float-sm-right">
<li class="list-inline-item"><img src="images/fb-icon.png" alt="bf-icon"></li>
<li class="list-inline-item"><img src="images/tw-icon.png" alt="tw-icon"></li>
<li class="list-inline-item"><img src="images/dr-icon.png" alt="dr-icon"></li>
</ul>
</div>
</div>
</div>
</footer>
<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>
You would probably need to do it through CSS and add a new class to HTML. Try to add the following CSS code in your css file without the <style> tags or in your html with the <style> tags:
<style>
#media only screen and (max-width: 578px) {
.credits {
text-align:center;
}
}
</style>
and add credits class to the surrounding div like so:
<div class="col-md-6 col-sm-6 col-xs-12 credits">
<img src="images/footer-logo.png" alt="footer-logo">
<p class="d-inline">All Rights Reserved.</p>
</div>
P.S. The 578px in the CSS is the default bootstrap xs width.
As you are using bootstrap 4, there are no class with col-xs-* in it, instead you can just use col-* for example col-4 to span a column for 4 width grid on extra small devices.
Secondly as all the content in these two columns the content is inline so you can center it using text-align:center; easily on main div in media`query for small screen like:
#media only screen and (max-width: 576px) {
.footer-section {
text-align: center;
}
}
Hope it helps.
Simply add col-12 in your <div class="col-md-6 col-sm-6 col-xs-12">. Now when the screen is smaller than XS, they will be in the middle.
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