Doctype bootstrap vertical alignment [duplicate] - html

This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 3 years ago.
I've downloaded bootstrap 4.3.1 and for the life of me I can't get vertical alignment to work under any circumstance if I have a <!DOCTYPE html> tag at the head of the html.
EDIT: With the body tag, results are the same.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheets/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row h-100 justify-content-center align-items-center">
<div class="mx-auto col-sm-6" style="border: 2px solid red">
<h3 class="text-center">Heading3</h3>
<h4 class="text-center">Heading4</h4>
</div>
</div>
</div>
</body>
</html>
This divs are still stuck to the top of the screen unless I comment out the doctype. I have tried adding a custom css with body{height:100%} and body{min-height:100%} and no matter what, the doctype breaks vertical alignment. This happens in both Chrome and Safari. Any ideas?

Related

Jumbotron is not showing in bootstrap [duplicate]

This question already has answers here:
How to create jumbotron in Bootstrap 5?
(9 answers)
Why the jumbotron class is not working in bootstrap 5 version? [duplicate]
(2 answers)
Closed 1 year ago.
I am currently new to using bootstrap and have come across a problem regarding the jumbotron. When I apply it, it does not show but everything inside does. This is the code:
<html lang="en">
<head>
<title>Boostrap Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bs/bootstrap.min.css">
<script src="bs/jquery.slim.min.js"></script>
<script src="bs/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Home page is coming soon!</h1>
<p>This website!<p>
Test this button!
</div>
</div>
</body>
</html>
I have a folder that I installed that contains all of the .min files. I have checked and they all don't seem to have any problems. Does anyone have a solution to this?
According to the Bootstrap 5 migration document, Jumbotron was "Dropped".
The jumbotron component as it can be replicated with utilities. See
our new Jumbotron example for a demo.
A BS5 example they provide is:
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
</div>
</div>

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

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>

Responsiveness of Bootstrap page [duplicate]

This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
Can you say why do this code is not adapt to different mobile devices? I am HTML beginner and can not figure it out. I'm using Bootstrap 4 framework.
<!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=yes">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="xxxxx.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
<title>xxxxx</title>
</head>
<body>
<div class = "container">
<hr class = "spec-hr">
<div class = "row justify-content-md-center">
<div class = "col-md-6 text-left name">
xxxxxx
</div>
<hr class = "spec-hr">
</div>
<div class="row justify-content-md-center intro">
<div class="col-md-3 text-center">
Photo
</div>
<div class="col-md-3 text-center">
Kontakt<br>
<p class = "email">xxxxx#gmail.com<br>
mobile: xxxx<br>
facebook: xxxxx</p>
</div>
</div>
<hr class = "spec-hr">
<!--Motto-->
<div class="row justify-content-md-center motto">
<div class="col-md-6 text-center">
<p class="motto">Every day is a chance to get better<br></p>
<p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
</div>
</div>
<hr class = "spec-hr">
</div>
</body>
</html>
You use classes such as col-md-6 and col-md-3, these are for medium sized screens., for mobiles, you need classes such as col-6 and col-3. See here for examples and definitions
"Can you say why do this code is not adapt to different mobile
devices?"
The meta tag is wrong. It should be:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The page will never be responsive without the correct meta tag. Please read the documentation...
"To ensure proper rendering and touch zooming for all devices, add the
responsive viewport meta tag to your <head>."
Also see:
Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile
For design to be responsive for mobile devices, use bootstrap classes like col-xs-3, col-xs-6. "col-xs-*" is used to target mobile devices having width greater than 230 and less than 768. Also use #media screen {} to target specific style to specific width mobile device.

Bootstrap columns not responsive [duplicate]

This question already has answers here:
Simple Bootstrap page is not responsive on the iPhone
(4 answers)
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 5 years ago.
I'm trying to make a responsive block in the middle of my page using Bootstrap.
But I cannot figure out why the columns dont respond to my bootstrap setup. What am I doing wrong?
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 mx-auto" style="background-color: blue; color: white;">
test column
</div>
</div>
</div>
I figured it out. I forgot to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to my html document. Now it works!
In your example they are responsive... Bootstrap uses adaptive breakpoints.
If you want fluid, then you can use Foundation.