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.
Related
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>
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>
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?
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.
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>