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

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>

Related

Bootstrap grid aligning inaccurately and won't respond to .css file

I am following along with the exercises in the Jump Start Bootstrap (DOWNLOAD LINK https://learn.vccs.edu/courses/406438/files/108188236/preview )
In chapter 02, we are creating a grid system. I have entered the code for the index.html and style.css files to format the grid as shown in the book.
The columns in the grid need to align vertically and horizontally, however, they simply align vertically only. The column divs also do not respond to the style.css file that is supposed to format them in size and color.
Bootstrap grid example screenshot
Bootstrap grid that my code outputs screenshot
I have checked my code several times and compared it to the code in the book (which I added a download link above [Chapter 02 index.html file]) and I cannot find anything wrong with it.
This here is the code that I am using for the html and css files:
https://pastebin.com/MQWnJXvT
If anyone can take a look and give any suggestions or just managed to spot and point out a mistake that I missed, I would greatly appreciate it. I am scratching my head with this one and will probably continue to do the rest of the night.
The only issues I can think of is that I am assigning the wrong classes in the column divs or am placing the <link href="css/style.css" rel="stylesheet"> line in the wrong section.
I thank everyone in advance who has any advice or suggestions!
Your code seems to be working fine. The problem should be the link tag, set the path correctly.
<!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>
.col1 {
background: #5C7080;
}
.col2 {
background: #6BC0FF;
}
.col3 {
background: #E8AA4C;
}
.col4 {
background: #FF384E;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</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.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 - 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

Not working vertically centering bootstrap 4 [duplicate]

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>

For elements with box-sizing: border-box, only absolute content area dimensions can be applied

I added two images to my html page and they're large in size. I attached a screenshot of images for reference. images_full_size I added a dive with a class of thumbnail using bootstrap. Images got smaller and fitted to the Grid. I am unable to change the height of the first image. I attached second image for reference. img with thumbnail I tried to change the height through chrome inspector to be the same height as second image but I got an error saying "For elements with box-sizing: border-box, only absolute content area dimensions can be applied" enter image description here Pleas can you help how can I solve this.
Thank you.
My code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Grid Basics</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://source.unsplash.com/JoH60FhTp50">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://source.unsplash.com/buF62ewDLcQ">
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
</body>
</html>

Make an image fill the background in a Bootstrap layout

I am trying to beat a bootstrap layout into fitting some requirements I have. The layout started as the default generated by an MVC 5 project template, but I am stuck on getting an image to fill the entire browser width. I need the image to appear as follows:
If I add a section, with an img tag, the image doesn't stretch across the entire screen, but starts 'indented' from the left, and causes the brower so 'overflow' to the right, like:
The only alternative I can see is to set a background image for body-content, but that presents a whole lot of scary positioning issues for the content below the image, and there is quite a lot of that, e.g. below the text "Here's what you'll get' there is still a whole lot of content.
Here is an abridged version of my first attempt:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar">
...
</div>
<div class="container body-content">
<section id="landing">
<img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
</section>
<footer>
...
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
You can set the background image of the entire body like this:
body {
background-image: url("http://www.placecage.com/1000/800");
background-size:100%;
}
However if you are looking to make a specific element full width with Bootstrap then you should use container-fluid rather than container to hold your content as that element reaches the boundary of your screen width instead of being fixed width.
Note: run this snippet in full screen to get the full effect.
.container,
.container-fluid {
background-image: url("http://www.placecage.com/1000/800");
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">Fixed width</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">Full width</div>
</div>
</div>