bootstrap img responsive height does not keep container height - html

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;
}

Related

Cannot align items to centre of page in bootstrap 5 [duplicate]

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 11 months ago.
I am trying to align an item to the centre of the page in html using bootstrap flex boxes. For some reason the align-items-centre attribute is not working.
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
elment goes here
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
you need to specify the height of your container, vertical alignment will not work without a height. You need to add vh-100 for element.
<!DOCTYPE html>
<head>
<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="stylesheet" href="style.css">
</head>
<body>
<div class="container vh-100 d-flex justify-content-center align-items-center">
element goes here
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
What are you trying to achieve? just one element in whole page? Here you go :D
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

How to properly size a logo in bootstrap navbar

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="./styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img style="padding: 0%;"src="./imgs/HHLogo-1 (1).png" alt="" width="30" height="auto" class="d-inline-block align-top">
</a>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
I am trying to stick a company logo in the navbar in bootstrap5. The image is an png. For some reason the image is properly sized but the navbar is way too thick. How can I size the navbar appropriately? . I have tried everything I have came across on here on stackoverflow and other forums/websites. I have tried changed padding and max navbar height among other things. Can you help me out?? Thank you so much any insight is much appreciated.
I added two selectors to your css - .navbar-brand { ... } and .navbar-brand > img { ... }:
.navbar-brand {
width: 150px;
}
.navbar-brand > img {
width: 100%;
}
Now you can adjust the size of the navbar and logo yourself by changing the width of the .navbar-brand { ... } selector.
html, body {
height: 100%;
margin: 0;
}
.navbar-brand {
width: 150px;
}
.navbar-brand > img {
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="./styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img style="padding: 0%;"src="https://i.stack.imgur.com/RHYjg.png" alt="" width="30" height="auto" class="d-inline-block align-top">
</a>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
use this
nav a.navbar-brand {
max-width: 150px;
margin: 0;
}

How do you do padding for bootstrap img-fluid

Not much of a front end developer, I tried all kinds of trix, margin, p-0, style="padding:20px" but nothing seems to be moving my fluid image to position it where I want during page load, assistance much appreciated.
**HTML**
<img class="img-fluid" src="~/Content/MyImage.jpg"/>
**CSS**
.img-fluid {
padding-left:20px;
}
I don't know what you exactly want.
So I have guesswork you want use "Bootstrap" because you did written "img-fluid" class.
I think the code below will help you.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Bootstrap JS CDN -->
<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>
<title>Demo</title>
</head>
<body>
<div id="root" class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img class="img-fluid" src="https://placehold.it/1920x1080.png" alt="image"/>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
}
.row > div {
padding-left: 0px;
padding-right: 0px;
}
.img-fluid {
padding-left: 20px;
padding-right: 20px;
}

Bootstrap welcome popup and hover

I need a little help to create this. My idea is to have a welcome popup on my web page. When the user firstly loaded the site.
[
And after few seconds i need to place this image on top right corner of the site. like this
How can i do this by using bootstrap css. Please help me :)
This is with Bootstrap 4 and JQuery. JQuery slim changed to min to allow animations. Run the code snippet.
<!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>
img {
width: 100%;
width: 100%;
position: relative;
float: right;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<img src="https://i.stack.imgur.com/Jrbqf.png">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
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>
<script>
$( document ).ready(function() {
$('img')
.hide()
.fadeIn(1000)
.delay(2000)
.animate({
width: "50%",
height: "50%"
}, 1500);
});
</script>
</body>
</html>

Bootstrap: How to center vertically an element

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>