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

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%);

Related

Background image won't show up in header

I am trying to follow along on Colt Steele's course and for some reason my background image will not show up. I've checked everything and I'm stuck. I tried writing in the style tag and inserting the background in html instead of creating a separate css file like he did and it did not work. So instead I tried to just make a separate css file which I'm more comfortable with so far. Please let me know what I can do. Thank you!
<!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" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Blog</h1>
<p class="lead">Lorem ipsum</p>
Do Something
Another Thing
</section>
<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>
</body>
</html>
CSS
#header {
background-image: url(https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80) !important;
}
Your URL needs to be a string i.e you need to add an apostrophe ( ' ) on each side of it ('https://images.unsplash...'):
#header {
background-image: url('https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80') !important;
}

Bootstrap columns work in IE and edge (columns appear side by side), but not in chrome (columns stack vertically)

i've just started learning web dev with bootstrap.
I'm running into a problem i don't understand. When i view my project in IE or edge everything looks as expected (columns side by side):
Internet explorer vs chrome:
https://i.stack.imgur.com/CWe8Y.png
I've checked whether this is due to screen size, but the columns remain stacked vertically no matter how big I make the screen in chrome.
index.html code:
.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large;
}
<!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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="CustomStyles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!--Columns must always be the children of a row class-->
<div class="col-2">
<!--Content must always be inside a col class-->
<div class="customDiv">Column 1</div>
</div>
<div class="col-md-8">
<div class="customDiv">Column 2</div>
</div>
<div class="col-md-2">
<div class="customDiv">Column 3</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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="bootstrap/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Would really appreciate any help. Been stuck on this for a while and I can't find anyone else who has had this exact problem.

Bootstrap grid with 3 divs in a row with same height [duplicate]

This question already has answers here:
Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row
(6 answers)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 4 years ago.
I have 3 Div-Container inside a row. Each one has, caused by the content, a different height. I want to set background color, but the color should reach to the bottom of the parent-Div (Row). All my tries failed, I wont get the same height of the divs.
<div class="row">
<div class="col-md-7">Test</test>
<div class="col-md-2">Test</test>
<div class="col-md-3">Test</test>
</div>
With a table it will be easy, but thats not the state of the art...
What will be the css-style for do that, if I wont to support responsive layout?
For Bootstrap 3 versions, you could approach a fixed height for md+ screen devices (width >= 992px) with something like this:
#media(min-width:992px) {
.fixed-md-height {
height: 150px;
}
.h-100 {
height: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row fixed-md-height">
<div class="col-md-7 h-100 bg-danger">Test</div>
<div class="col-md-2 h-100 bg-primary">Test</div>
<div class="col-md-3 h-100 bg-warning">Test</div>
</div>
</div>
On Bootsrap 4 there already exists a built-in class h-100, but the md breakpoint changes to width >= 768px. So the approach will be something like this:
#media(min-width:768px) {
.fixed-md-height {
height: 150px;
}
}
<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row fixed-md-height">
<div class="col-md-7 h-100 bg-danger">Test</div>
<div class="col-md-2 h-100 bg-primary">Test</div>
<div class="col-md-3 h-100 bg-warning">Test</div>
</div>
</div>

bootstrap img responsive height does not keep container height

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

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>