So I am creating a form where we have an upload button in a card. The result was that the <label> and the image aligned properly but the <button> element was not shown below the label. I have even tried to use bootstrap classes such as ml-5 and such but still it doesn't work. I want the button to be placed below the label but the problem is: it comes on the same line as shown in the image:
I want it to look something like this:
Is there any way we can align the button below the label. It should look like the image above.
The code:
.img-wrapper {
display: block;
width: 6.4rem;
line-height: 15px;
margin-left: 6rem;
float: right;
}
.img-wrapper img {
display: inline;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card bg-light mb-3">
<div class="card-body">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You can use this code:
.img-wrapper {
display: block;
width: 6.4rem;
line-height: 15px;
margin-left: 6rem;
float: right;
}
.img-wrapper img {
display: inline;
border-radius: 50%;
}
.card-body{
display: flex;
justify-content: space-between;
}
.card-content{
display: flex;
flex-direction: column;
align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card bg-light mb-3">
<div class="card-body">
<div class="card-content">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>
<input type="file" name="profile" id="profile" hidden=""/>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Wrap these elements in a div:
<div style="display: inline-block">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>
and add display: inline-block to your button.
.d-inline {
display: inline-block;
}
You can change the button class to d-block from d-inline and put <div class="img-wrapper"> before it.
<label for="profile">Upload a Profile image:</label>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
<button type="button" class="btn btn-primary d-block" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>
as you are using bootstrap, so it will be very easy for you to do this.
let me show you how it ll work:
<div class="row">
<div class="col-8 col-md-8 col-sm-8 col-lg-8"> // here you can specify cols on your own
<div class="row">
//your label and ll go here
</div>
<div class="row">
//button ll go here
//it ll create a new line but within this parent div
</div>
</div>
<div class="col-4 col-md-4 col-sm-4 col-lg-4">
// your image code ll go here
</div>
</div>
it ll give you button at bottom of the label and also image ll be placed as before with using standard bootstrap 4 classes only...
Thank you!
Happy coding!!
Related
I added share buttons from Sharethis.com. When I refresh the page button does not appear, but when I resize the wievport it appears.
`
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=63a323358fb8b6001abbbf6b&product=inline-share-buttons&source=platform" async="async"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Article preview component</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7ab7d5ca64.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Kumbh Sans', sans-serif;
background: hsl(240, 5%, 91%);
}
.arrow {
width: 70px;
}
.pop {
width: 15rem;
right: 16rem;
top: 14rem;
}
.arrow {
width: 5rem;
color: black;
}
#share {
color: white;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container mt-5">
<div class="card shadow-lg">
<div class="row">
<img src="./images/drawers.jpg" alt="drawer image" class="col-4">
<div class="col-6 p-4">
<h1>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.</p>
<div class="row">
<img src="./images/avatar-michelle.jpg" alt="michele image" class="col-2 rounded-circle">
<div class="col-6 mt-3">Michelle Apleton <br> 28 Jun 2020</div>
<div class="bg-light rounded-circle col-1 p-3 m-3 d-flex justify-content-center" id="button">
<img src="./images/icon-share.svg" alt="" class="">
</div>
<div class="pop position-absolute end-10 d-none" id="popup">
<div class="row bg-dark rounded text-white py-1 d-flex justify-content-center align-items-center">
<div class=" col-4 p-2">SHARE</div>
<div class="col-8 zet sharethis-inline-share-buttons"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let changeClass = document.getElementById("button").addEventListener('click', () => {
document.getElementById("popup").classList.remove("d-none")
document.getElementById("popup").classList.add("d-block")
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
`
I placed their head code into the head. I tried Z-index, but it does not appear until resizing the viewport, narrowing or expanding does not matter, in both cases it appears.
I created a basic website to improve my front-end skills. I used Bootstrap 5 to make it responsive but it does not look good on the phone. Can somebody tell me what I did wrong? On my mobile device, it looks like this :
enter image description here
When I decreased the size of the browser, it looked good, but when I put it online on github, it looks like the page has been cut.
Html :
<!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.0">
<title>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row">
 <input class="form-control" id="email" placeholder="Your email adress..."> 
<button type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>  
<i class="fab fa-twitter"></i>  
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
css:
#email{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover{
background-color: rgb(124, 111, 204);
}
.firstp{
padding-right: 55px;
}
.imgdash{
width: 100%;
max-width: 400px;
height: auto;
}
Add flex-wrap and justify-content-center class on form element, will resolve your issue. Also add mb-2 class on both input and button element.
Below code snippet also updated and i hope it'll resolve your issue. Thank You
#email {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover {
background-color: rgb(124, 111, 204);
}
.firstp {
padding-right: 55px;
}
.imgdash {
width: 100%;
max-width: 400px;
height: auto;
}
<!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.0">
<title>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row flex-wrap justify-content-center">
 <input class="form-control mb-2" id="email" placeholder="Your email adress..."> 
<button class="mb-2" type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>  
<i class="fab fa-twitter"></i>  
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
What I can see is you are using a lot of .col . You need to specify .col for small and large devices. Otherwise some of it's function will break. Take a look at this link:
https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks
You see in this link that there are many sm modifier used. Use them and you can see some results.
I'm working on a responsive web app in Bootstrap 4 and use cards with images on one of the pages. Everything works fine through any window resizing on a desktop view; however, when I view them on mobile the card image height is completely off and about half the size of what it should be.
Here's the HTML:
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
The below CSS was added to ensure the cards all remain the same height, but this seems to cause the issue where the image is extremely small on mobile.
CSS:
#playerCardImage {
width: 100%;
height: 15vh;
object-fit: cover;
}
A codepen with the card example can be found here: https://codepen.io/franchise/pen/MWaoXOp.
Detail:
Cannot replicate sizing issue with Chrome Dev Tools mobile view, it only shows what I would expect the card to look like on mobile
To recreate the issue, view the Codepen on mobile to see the image is about half of the size compared to viewing the Codepen on a desktop
What am I missing here? Thanks in advance for the help.
Instead of creating a style based on id, can try to create the style based on class card-img-top.
.card-img-top {
width: 100%;
height: 150px;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/61617160/bootstrap-4-card-image-resizing-on-mobile#
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You should use height in percent
#playerCardImage {
width: 100%;
object-fit: cover;
}
#media all and (max-width:768px){
#playerCardImage {
width: 100%;
height: 110px;
object-fit: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I want the blue element to expand to the bottom of the page.
But if I set the height: 100% to it, then it does expands beyond the bottom of the page. I think it does that because it doesn't take in consideration the size of the red element and then together with the size of the red element they go more that 100% of the parent.
How do I know that it expand beyond the page? Because the parent element have borders that then are shorter than the blue element.
The code looks like that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
:root {
--body-backroung-color: #e7e8e5
}
html, body {
height: 100vh;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: var(--body-backroung-color);
}
.main-content {
padding: 25px;
}
.zero-margin-lr {
margin-left: 0;
margin-right: 0;
}
.page-margin-lr {
margin-left: 9em;
margin-right: 9em;
border-left: solid 0.1em gray;
border-right: solid 0.1em gray;
}
.main-content-custom {
background-color: #e9ecef;
}
.jumbotron-custom {
margin-bottom: 0 !important;
}
.content {
margin-bottom: 1em
}
</style>
</head>
<body class="mat-typography">
<div class="container-flex page-margin-lr">
<!--RED ELEMENT-->
<div class="row">
<div class="col-12">
<div class="jumbotron text-center">
<h1>.</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/home']"
routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- BLUE ELEMENT-->
<div class="row main-content-custom zero-margin-lr">
<div class="col-2"></div>
<div class="col-8">
<div class="main-content">
<form name="newPost" #newPost="ngForm">
<div class="form-group">
<label for="title">Title</label>
<input id="title" name="title" type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea id="content" name="content" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<label for="author">Author</label>
<input id="author" name="author" type="text" class="form-control"/>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary" >Post</button>
</div>
</form>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</body>
</html>
The snippet above is inside the body element. The html and body have height: 100%
How can I make the blue element expand to the bottom of the page but don't go beyond/outside of the parent element?
So the solution for me was:
add height: auto; min-height: 100vh to the parent.
add flex: 1 to the child/blue element
Thank you to Zohir Salak for heling a lot.
I have a problem with button text. I have customized the width and height of a button and when I resize, its text remains no more in center on some screen sizes in a debugging mode.
Html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container text-center testButton">
TEST
</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
Update
Here is the image where I want html button to replace the button on image
Please have a look I have added the image on which I want to place an html button with same width and height so that it hides the image button.
Here's the code (using your HTML as a basis) for a large button that remains centered on all devices/screens. Click the "run code snippet" button below:
<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="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay text-center">
<button routerLink="/test"
class="btn btn-lg btn-success fill-container text-center testButton" style="width: 34%;">
TEST
</button>
</div>
</div>
</div>
</div>
</div>
This should do the trick : Adding class text-center to parent div of the button tag.
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button routerLink="/test" class="btn btn-success">TEST</button>
</div>
</div>
</div>
Also make sure to include Bootdtrap V4 in head tag.
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
Have a look at the this link as well, adding bootstrap to your page: click me
To center the text on button: Use
class="text-center"
You need to Apply "align-center" class on .img-overlay {} not on Button then it will work