Not working vertically centering bootstrap 4 [duplicate] - html

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 5 years ago.
I want to center vertically text on page, i found the way to do that and rewrite -on codesnippet it's working, but not for me. Here is my code:
<html lang="pl">
<head>
<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">
<title>Strona w przebudowie</title>
</head>
<body>
<div class="row h-100">
<div class="col-sm-12 my-auto">
<h1 class="display-4">STRONA W PRZEBUDOWIE</h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>

It is recommended to use Bootstrap 4 classes (instead of css hacks) for simple tasks of this nature because css hacks have the tendency to require even more css hacks down the road to fix the problems caused by the original css hacks.
A clean solution using Bootstrap 4 classes for vertical centering would be to use the align-items-center class on the row. However, you'll also need to give that row some height if you don't have much content in that row. To achieve that, you add style="height: 100vh" to the row which gives it 100% viewport height.
Finally, if you want to center the text horizontally also, you can use the text-center class on the column.
Here's the complete code snippet (click the "run code snippet" button below and expand to full screen):
<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 align-items-center" style="height: 100vh">
<div class="col-sm-12 text-center">
<h1 class="display-4">STRONA W PRZEBUDOWIE</h1>
</div>
</div>
</div>

Try This:
.col-sm-12.my-auto {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.col-sm-12.my-auto {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row h-100">
<div class="col-sm-12 my-auto">
<h1 class="display-4">STRONA W PRZEBUDOWIE</h1>
</div>
</div>

Related

Bootstrap - Align 2 divs vertically on responsive mode

I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled

Overlapping divs using bootstrap extend past page width, unsure what the cause is

I have some divs arranged in a way so that there are two columns, and a box that overlaps between them. For reasons I can't figure out, the div extends just slightly past the page width, causing a horizontal scroll bar to appear (which is bad).
Additionally, the left most div extends below the background image of the parent div, which should not be possible.
Why are these divs not lining up neatly?
My HTML code is below. I am not using a snippet as the snippet shows the output in responsive mode which does not demonstrate the issue. I know that inline CSS is advised against, and it is only used for the purpose of this question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
<div style="height:500px;background-image:url(https://www.w3schools.com/howto/img_parallax.jpg);background-position:center;background-size:cover;">
<div class="row pb-3" style="height: 520px; position:relative;">
<div class="p-3" style="position:absolute; background:white; top:100px; height:220px; width:400px; z-index: 2;">
<h1>Text to overlap here</h1></div>
<div class="col-md-3" style="background:grey;"> </div>
<div class="col-md-9" > </div>
</div>
</div>
</body>
</html>
Just add to row with class pb-3
.pb-3{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You can also add to div with class p-3
.p-3{
max-width: 100%;
}
Avoid using "height" and use min-height /max-height instead.

Bootstrap 4 Content Won't Horizontally and Vertically Align Center [duplicate]

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
How to vertically center a container in Bootstrap?
(10 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I can't seem to get my content to vertically and horizontally center in the body of the page itself in Bootstrap 4. I've used the documentation and multiple answers throughout StackOverflow with those with the same problem to no avail. I'm unsure why this won't work. Help and explanations are appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-sm-12">
<h1>This is the test</h1>
Let's get started
</div>
</div>
</div>
Hope fully it will help to you easily
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Align Center Examples</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.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Working In center</h1>
<p>Well, Hope your Issue is Solved..</p>
</div>
</body>
</html>

Bootstrap 4 IE not taking col-sm-12 on card-img-overlay

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.

Vertical and Horizontal Alignment in fullscreen with bootstrap 3 [duplicate]

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I'm beginner in this world, and have some tricks I still need to learn, I'm playing in this design and the most thing I've been crushed is the align. I'm trying to make this align vertically and horizontally in a full screen style. I've tried some different things but it always break in some point.
I'm using latest Bootstrap.
The base is the following one:
http://i.stack.imgur.com/RUL9K.png
Thanks for your time.
You can try it by this code below:
<!DOCTYPE html>
<html>
<head>
<title>Centering</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function(){
window_height=jQuery(window).height();
my_div_height=jQuery(".col-centered").height();
center_value=(window_height-my_div_height)/2;
jQuery(".col-centered").css('margin-top',center_value);
});
// script for responsive;
jQuery(window).resize(function(){
window_height=jQuery(window).height();
my_div_height=jQuery(".col-centered").height();
center_value=(window_height-my_div_height)/2;
jQuery(".col-centered").css('margin-top',center_value);
});
</script>
<style type="text/css">
.col-centered {
margin:auto;
float: none;
text-align:center;
}
</style>
</head>
<body>
<section class="custom_name">
<div class="container-fluid">
<div class="row">
<div class="col-lg-10 col-centered">
fsadfljsd
</div>
</div>
</div>
</section>
</body>
</html>
you can control horizontal alignment by creating a div class="row" then put need space divs with class col-md-*
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-8">col-md-8.. This will occupy 8/12th space. but will occupy full width in small screens.</div>
<div class="col-md-4">You can also add more colomuns. this one is 4/12th space.</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-md-offset-3">if you add some offset to beginning you can use .col-md-offset-*. here there will be 3/12th space offset. again in small screen it will be full width</div>
</div>