I have the following HTML block.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Hover effect is not working properly on first load.
I have checked here, but couldn't make it work.
use transition-delay on your hover, so that it will kind of animate the hover feature which looks smooth transition.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
transition-delay: 0.3s;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
I got it to stop jumping by editing work-box-container and work-box like so
.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}
.work-box {visibility:hidden}
.work-box-container:hover .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}
See now:
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}
.work-box {visibility:hidden}
.work-box-container:hover .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Because the first time you hover the image it needs to get loaded. This takes some time, hence the effect.
You can solve this in a couple of ways:
One way is to use some sort of preloading
Another way (in my opinion, the preferred way) would be to just use one image and just change it:
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
opacity: .7; /*NOTE: only opacity changed here, no second image needed*/
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
If u want smooth transition,Try this:-
-The best way in css is to PRELOAD the image to avoid the glitch on first load.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
transition:all 0.3s;
}
.work-box-container:hover .work-box{
background-image: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
body:after{
display:none;
content: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Best way to accomplish this is to use CSS sprite image technique. I have accomplished using it. Please adjust your image height and background-position to your need.
.work-box {
background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -0 no-repeat;
height: 70px;
width: 1334px;
}
.work-box:hover {
background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -70px no-repeat;
height: 70px;
width: 1334px;
}
<div class="work-box-container ">
<div class="work-box">
</div>
</div>
Related
I am making a site and the text that says what's new in the code snippet below is not fitting at the top of the box I created.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: var(--border-width, 100px);
height: var(--border-height, 200px);
padding: 50px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
[BETA]</div> Transformation</li>
</ol>
</div>
</body>
</html>
As you see, this makes a background with a box and text. Please show me how to position the <h1> at the top of the box with the border I created.
This should help. That 50 px padding was removed and then width and min-width were used to control the width of the box. Also applied margin css to the h1.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: 50%; /* changed */
min-width: 200px; /* added */
height: var(--border-height, 200px);
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
.content { /* added */
margin: 0 .5rem; /* added */
} /* added */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
<a href="linkoftruth">
<li>
<div id="beta">[BETA]</div> Transformation</li>
</a>
</ol>
</div>
</body>
</html>
There were a few problems with your code. Firstly, the header was being smushed, because you used padding to give your div its size, as opposed to a width and a height. Next, you were calling on variables from :root, but also trying to pass values into those variables. To achieve your solution, I fixed the issues mentioned, as well as created two new div sections - one for the header, and one for the list. Also, you were wrapping your li elements in a tags. It should be the other way around.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
body {
background-color: var(--background-color);
}
.lftSector {
width: 300px;
height: 300px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
.lftSector > div {
width: 100%;
text-align: center;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 80%;
}
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<div>
<h1 class="content">What's New?</h1>
</div>
<div id="content">
<ol>
<li><span id="beta">[BETA]</span>Transformation</li>
</ol>
</div>
</div>
Additionally, I'd recommend usually setting your widths to be percentages, or based on vw/vh. Just a tip.
This is my code, I've started making a simple menu but the problem is that it is not 100% height. I've tried many solutions I have seen on similar posts but none of them help. I have tried setting the min-height, changing between % and vh, and much more but none of it worked.
M.AutoInit()
let sideMenu=document.getElementById("sideMenu")
sideMenu.addEventListener("mouseenter",()=>{
sideMenu.setAttribute("class", "col s12 m12 l12 side-menu")
})
sideMenu.addEventListener("mouseleave",()=>{
sideMenu.setAttribute("class", "col s2 m2 l2 side-menu")
})
.side-menu{
background-color: #b9ffc8;
height: 100% !important;
transition:ease-in-out .3s;
}
.side-menu:hover{
background-color: #5eff81;
}
.side-menu-wrapper{
height: 100% !important;
}
.row {
height: 100vh !important;
}
.menu-icon{
color:darkgrey;
transition: ease-in-out .3s;
}
.side-menu:hover .menu-icon{
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col s3 m2 l2 side-menu-wrapper">
<div class="row">
<div class="col s2 m2 l2 side-menu" id="sideMenu">
<i class="small material-icons menu-icon">dehaze</i>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Add margin: 0; to the .row class. To be more precise add margin-bottom: 0;.
You can also remove all the !important's from the height's.
.side-menu {
background-color: #b9ffc8;
height: 100%;
transition: ease-in-out 0.3s;
}
.side-menu:hover {
background-color: #5eff81;
}
.side-menu-wrapper {
height: 100%;
}
.row {
height: 100vh;
margin-bottom: 0;
}
.menu-icon {
color: darkgrey;
transition: ease-in-out 0.3s;
}
.side-menu:hover .menu-icon {
color: white;
}
See it in action on codepen: https://codepen.io/manaskhandelwal1/pen/rNWLVLg
Presuming you are talking about the little gap at the bottom.
Row is a Materialize class:
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
So if you change your row class to:
.row {
height: 100vh !important;
margin-bottom:0px !important
}
It will override the materialise margin-bottom:20px .
And you'll get 100% height
This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 2 years ago.
Adding <!DOCTYPE html> is breaking my CSS only sticky footer meaning that as soon as I add it, the footer does not stick to the bottom of a web page anymore.
Following is a working example without the <!DOCTYPE html>.
Doing further tests I've noticed that when not declaring the page as HTML5 by adding the DOCTYPE statement, the div with CSS class wrapper is able to be stretched to take the full document height thus pushing the footer to the bottom. This is not happening when declaring the document as HTML5.
https://jsfiddle.net/muvwh4zn/
body {
background-color: #f0f0f0;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="text-white-50 text-center navbar">
HEADER
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
Please also see my own comment just below for a possible solution to this issue.
Add flexibility to the container class. Your footer will always be pinned to the bottom.
https://www.w3.org/QA/2002/04/valid-dtd-list.html
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
body {
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
.push {
height: 50px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center navbar">
header
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
I'm trying to make my content into 2 columns where the first will be used for a full height sidebar while the other will contain my navbar,content,footer.
Using Bootstrap 4.0
This is what i'm trying to do :
I'm using the sticky footer example from bootstrap 4 examples but when i add the row and columns , the footer is coming after the navbar instead of taking the whole html page length.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
Sidebar
</div>
<div class="col-sm-10">
<div class="navbar">
...
</div>
<div class="content">
test1
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Test</span>
</div>
</footer>
</div>
</div>
</div>
Since you're using bootstrap with flex, you can use the power of flex to make a sticky footer - no need for giving it an absolute position.
EXAMPLE
So your html stays the same just need to add couple of layout classes. The main techique is to make .main a flex container and reposition its children in column
.main {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
while .content block must stretch the remaining height, thus pressing the footer to the bottom, this can be achieved with simple rule:
.content {
flex: 1;
}
more on this technique here
here is the code for it :
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-2 col-xs-2 col-sm-2 col-lg-2">
<div class="sidenav">
About
Services
Clients
Contact
</div>
</div>
<div class="col-md-10 col-xs-10 col-sm-10 col-lg-10">
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
<br>
<p>
<strong>Note:</strong> content goes here</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle:https://jsfiddle.net/zmye2pth/1/
The text of second h5 element doesnt resize properly and get out over the background color, I also tested put the h5 inside a div and apply css to the div but it didnt work, what am I missing?
Here is the relevant code (I had to remove other elements and css properties):
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
try this :
h5{
font-size: 100%;
}
As the h5 has a fixed height, that is the expected behavior.
Change to min-height: 44px; in the .card .front h5 rule
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
min-height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
For h5 you are adding height: 44px; so the font-size is taking default h5 font size if you decrease the font size it will fix the issue or increase the height of h5
so use something like
.card .front h5{
font-size:16px;
}
or
.card .front h5{
height:64px;
}
Your css set heigth of the element to 44px and font-size to 1.25rem, change one of the properties or both, for example heigth to auto if you want to keep font-size, or change font-size to 100% if you want to keep the heigth of the element. There are several ways to do this.