Bootstrap grid with 3 divs in a row with same height [duplicate] - html

This question already has answers here:
Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row
(6 answers)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 4 years ago.
I have 3 Div-Container inside a row. Each one has, caused by the content, a different height. I want to set background color, but the color should reach to the bottom of the parent-Div (Row). All my tries failed, I wont get the same height of the divs.
<div class="row">
<div class="col-md-7">Test</test>
<div class="col-md-2">Test</test>
<div class="col-md-3">Test</test>
</div>
With a table it will be easy, but thats not the state of the art...
What will be the css-style for do that, if I wont to support responsive layout?

For Bootstrap 3 versions, you could approach a fixed height for md+ screen devices (width >= 992px) with something like this:
#media(min-width:992px) {
.fixed-md-height {
height: 150px;
}
.h-100 {
height: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row fixed-md-height">
<div class="col-md-7 h-100 bg-danger">Test</div>
<div class="col-md-2 h-100 bg-primary">Test</div>
<div class="col-md-3 h-100 bg-warning">Test</div>
</div>
</div>
On Bootsrap 4 there already exists a built-in class h-100, but the md breakpoint changes to width >= 768px. So the approach will be something like this:
#media(min-width:768px) {
.fixed-md-height {
height: 150px;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row fixed-md-height">
<div class="col-md-7 h-100 bg-danger">Test</div>
<div class="col-md-2 h-100 bg-primary">Test</div>
<div class="col-md-3 h-100 bg-warning">Test</div>
</div>
</div>

Related

Cannot align items to centre of page in bootstrap 5 [duplicate]

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 11 months ago.
I am trying to align an item to the centre of the page in html using bootstrap flex boxes. For some reason the align-items-centre attribute is not working.
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
elment goes here
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
you need to specify the height of your container, vertical alignment will not work without a height. You need to add vh-100 for element.
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container vh-100 d-flex justify-content-center align-items-center">
element goes here
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
What are you trying to achieve? just one element in whole page? Here you go :D
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Image doesn't fit in parent div inspite of using .img-fluid class

So, I've this little piece of test code where I'm trying to fit an image into the parent div as below in BS5. The challenge is that the image leaves a sizeable gap width-wise. This inspite of using .img-fluid class. Outcome attached which isn't ideal. There's a big gap.
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Why not write an inline css.
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
I think your col-6 that has the image inside it... It's making the thing appear just on the left side of the page?? This should work...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
Tha above only takes your normal thing and centers it on the page, I only added mx-auto to center the Div which contains your image.
You could also try col-8 col-9 col-10 to make the image bigger. It will still be fluid and extend the full width no matter how many columns wide you are. Naturally you wouldn't want it fluidly expanding larger than it's normal pixel size though.

align-items in 'row' do not work when i use a custom class in container-fluid in bootstarp 4?

I just started learning front end development and after studying basics of html5/css3, moved on to bootstrap 4. Now, O have been trying to make a copy of facebook login page, and used container-fluid for 100% width and then used container and row and column inside it. To match the background color, i added a custom class to container-fluid and then to align items vertically, i used align-items-end in row. But, for some reason, it does not work; I had been looking into it but couldn't find anything. Then, I tried something which let it happen. below is the code of both the cases, kindly help me understand what is going on and why it didn't work before and now why is it working? Help is appreciated. Thanks.
<head>
<!-- Charset -->
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
<!-- styelsheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<style>
.bg-fakebook {
background-color: #3b5999 !important;
min-height: 82px;
}
.fakebook-weight {
font-family: Tahoma;
font-weight: bold;
color: white;
margin: 0;
}
</style>
<!-- Title -->
<title>fakebook</title>
</head>
<body>
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------
JS files: jQuery first, then Popper.js, then Bootstrap JS
--------------------------------------------------------------- -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
output
Then, after trying many things, i added bg-fakebook to row as well which worked.
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end bg-fakebook">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
ouput
if you want to align middle first you have to display: flex the parent. Than add the alignment top center or bottom. like this
<div class="container-fluid bg-fakebook d-flex align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
To learn bootstrap 4 you must learn flex first. BTW Happy Learning.

Bootstrap columns work in IE and edge (columns appear side by side), but not in chrome (columns stack vertically)

i've just started learning web dev with bootstrap.
I'm running into a problem i don't understand. When i view my project in IE or edge everything looks as expected (columns side by side):
Internet explorer vs chrome:
https://i.stack.imgur.com/CWe8Y.png
I've checked whether this is due to screen size, but the columns remain stacked vertically no matter how big I make the screen in chrome.
index.html code:
.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="CustomStyles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!--Columns must always be the children of a row class-->
<div class="col-2">
<!--Content must always be inside a col class-->
<div class="customDiv">Column 1</div>
</div>
<div class="col-md-8">
<div class="customDiv">Column 2</div>
</div>
<div class="col-md-2">
<div class="customDiv">Column 3</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="bootstrap/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Would really appreciate any help. Been stuck on this for a while and I can't find anyone else who has had this exact problem.

Set a responsive image as a background in an html, with a menu on top

I have an html that with CSS shows an image responsively.
I want an image to be displayed fully on a screen and menu on top of it, so there won't be any scrolling when the menu is opened:
I would like to add a nav bar on top of that image, meaning that the image would be in the background
Right now, if I add a navbar, it doesn't give me that effect
I've tried to display the image in a div background, but that ruins the responsiveness...
How do I make the image to be "in the background" for any object I will display on top of it, without ruining the css?
Below is the working code of the page so far:
.content {
padding-right: 0px;
padding-left: 0px;
}
img {
max-width: 100%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid ">
<div class="row">
<div class="col-md-1 content">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97600&w=350&h=600">
</div>
</div>
</div>