Bootstrap - Align 2 divs vertically on responsive mode - html

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

Related

How to align elements inside a container to each corner but keeping the correct order

I'm having trouble figuring out how to get this correctly.
The situation:
I have a div (header of a card) which has an icon, a title and a span. This should be left aligned. The header can also have tags (spans) which should be right aligned (start from the right). This is easy to get using float right in the tags, the problem is that the order of the tags is wrong. I tried other things and got the order correctly, but if there are a lot of tags, and a second line is needed, it starts from the left, and it needs to start from the right.
Something like this:
Example
I'd recommend using something like bootstrap, so you can create your div in the specific order you want, and have it resize the divs according to screen size using the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
Here is a demo using a col that disappears on small screen sizes, but appears on larger ones... (4 different sizes (col-lg-12, col-md-12, col-sm-12, col-xs-12), and you can have elements resize according to screen width).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.2/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.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-md-9 col-sm-12 ml-auto" style="background-color:lavender;">Title</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavenderblush;">Div 1</div>
<div class="col-md-3 col-sm-0 ml-auto"></div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavender;">Div 2</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavenderblush;">Div 3</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavender;">Div 4</div>
</div>
</div>
</body>
</html>

Setting same height on columns

I am making a row with 2 columns with Bootstrap 3. I am programming for a webshop there is having around 100.000 products, so it is not converted to BS4 yet. Therefore I am forced to use BS3. The left column is gonna contain a background color and some text, while the right column will be an image.
This is how the row is looking like now:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="wrapper">
<div class="row">
<div class="col-sm-3" style="background-color:pink;">
<h3>Headline</h3>
<p>Some text here</p>
<button type="button" class="btn btn-info">Button</button>
</div>
<div class="col-sm-9">
<img src="http://placehold.it/900x200">
</div>
</div>
</div>
This is how my end result should be:
As said in comments your code is working, since you are using bootstrap 3 you may want to use img-responsive class for your image, because it has a large width.
By the way I have changed your col-sm-3 and col-sm-9 classes to xs ones, you may want to consider changing them to md or sm for your case.
<!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" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous"
/>
<title>Static Template</title>
<style>
.d-flex {
display: flex;
}
.image-container {
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
</body>
<!-- Latest compiled and minified CSS -->
<div class="container">
<div class="wrapper">
<div class="row d-flex">
<div class="col-xs-3" style="background-color:pink;">
<h3>Headline</h3>
<p>Some text here</p>
<button type="button" class="btn btn-info">Button</button>
</div>
<div
class="col-xs-9 image-container"
style="background-image: url(https://picsum.photos/id/287/900/200)"
></div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
</html>
-Edit: after taking a deeper look on what you really want to achieve (same height for both columns) I updated my question with the follow:
Adding a class called d-flex to set a display: flex on any container you need, once a container has a display: flex; value its children will stretch by default.
You may also need to update your image to support a height: 100% which I highly recommend not to, cause it will make the image look ugly. Instead take advantage of background-size: cover;.
Some good resources on how to make your image fit in nicely:
https://css-tricks.com/almanac/properties/o/object-fit/
https://css-tricks.com/almanac/properties/b/background-size/

Bootstrap layout for multiple divs with offset

I want to create a html page with first row which has a sidebar menu and div for showing the KPI metrics. I would like to make this KPI metrics div fixed.
Below this KPI metrics is a div for tables. Now when the user scrolls through the table the KPI metrics div should always be fixed. I would also like to know how to align the KPI metrics div and the table div aligned on the right side. I have figured that I could add position : fixed for the KPI div. But not sure how to align the table div on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>KPI DIV TO BE FIXED</p>
<div class="row row-no-gutters">
<div class="col-sm-4" style="background-color:lavender;">SIDEBAR</div>
<div class="col-sm-8" style="background-color:lavenderblush;">KPI DIV</div>
</div>
<br>
<p>TABLE DIV BELOW KPI DIV</p>
<div class="row">
<div class=" offset-md-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
</div>
</div>
</body>
</html>
Here's a start for you:
https://codepen.io/panchroma/pen/zXBVRp
I'm not clear where you need to go from here though. Let me know if you need more help.
The HTML is very close to what you posted, my only changes are on lines 21 and 23 where I modified the classes.
<div class="row row-no-gutters">
<div class=" col-md-offset-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
Good luck!

I have an issue with bootstrap 4

recently, I have downloaded videos from youtube on learning bootstrap 4 for responsive web design and everything works fine for me when I use
<div class="col-md-6> the md class for the medium screen and lg class for large screen works fine but xl class for the extra small devices and sm class for small devices no matter how I zoom the page and I have downloaded responsive website test extension for chrome but still nothing. this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn BOOTSTRAP CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
# this is the parent class and it should take the entire page width
<div class="col-lg-6 col-md-6 col-sm-12 bg-primary">
<p>this is the primary color</p>
<div class="row">
# and this is the child class and it should take 6 col of it parent class
<div class="col-lg-6 col-md-6 col-sm-6 bg-success">
<p>this is the success color</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
look like I didn't work because I was using Bootstrap 4, when I used bootstrap
3 the code works fine for me

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>