I have a non-fixed navbar and two columns. With a desktop layout there is no problem, but when I test the responsiveness from a mobile screen size, I need the column A to fill the remaining viewport's height and the column B to go under the column A. In addition, I need a solution that doesn't involve hardcoding, like subtracting the navbar's height. I've tried using Flexbox, but I haven't made it work. Instead, what I get is that both columns appear in the viewport. I'm using Bootstrap for the responsiveness.
Here there is a figure that shows my problem. Here is the code I've tried so far:
.flex-container {
display: flex;
flex-direction: column;
}
#content {
flex-grow: 1;
}
#row {
flex-grow: 1; max-width: 100vw;
}
#col1 {
background-color: dimgrey;color: white;
}
#col2 {
background-color:darkslategrey;color: white
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Web title</title>
</head>
<body>
<div class="vh-100 flex-container">
<nav class="navbar navbar-dark bg-dark">
<div class="container px-0">
<span class="navbar-brand mb-0 h1">Navbar title</span>
</div>
</nav>
<div id="content" class="container flex-container px-0">
<div id="row" class="row mx-0">
<div id="col1" class="col-sm px-0">
Column 1 content
</div>
<div id="col2" class="col-sm px-0">
Column 2 content
</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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
After reading your question I understood that you want the first child to take full height and then a second child should appear after scrolling through the first child.
As your content is set to flex: 1 which is by default taking entire remaining height, you can use it for your advantage here, now set #row and its children height to 100% as follows
#row, #row > * {
height: 100%
}
This will help you to set the height of #row and its children to at 100%.
So it will give you the desired result while in the mobile layout.
I hope this solves your query.
You'd need to use a media query to only set height 100vh on the smallest screen widths ...
#media (max-width: 576px) {
.min-100 {
min-height: 100vh;
}
}
https://codeply.com/p/1zHDI4rsc8
What you are looking for is a responsive design.
You could use MediaQueri to limit what you see in different sizes.
And for that functionality you want to do if you are using boostrap the best thing you can do would be to use the carousel.
Visit https://getbootstrap.com/docs/4.4/components/carousel/ to see how the carrousel works
Related
I've tried a few different iterations of this and just can't figure it out.
I'm using Bootstrap 4.3.1 and have the following div:
<div class="d-flex flex-row align-items-center">
<div class="col-8">
<h3>A lovely header</h3>
<ul>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<div class="col-4 img-wip">
<p>Hello</p>
</div>
</div>
I have a col-8 wide and the 2nd col-4 wide, the 2nd has a background image defined by the img-wip class. The content "Hello" is centered nicely but I can't get the background image to fill to the same height as defined by the content in the left col-8 column. The col-4 box just doesn't grow.
I've tried height:100% , flex:1;, flex-grow:1;
But the only thing that would change the height of the background image surrounding <p>hello</p> was a specific numerical height. I don't want that, I wanted the height defined by the height of the col-8
Is this possible or have I misunderstood how flex works?
The .img-wip class resolves to:
.img-fill {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/resin_wip.jpg);
}
What you have understood about flexbox is indeed correct but you have some confusions. The default behaviour of flex-items is stretch in cross-axis. In your case you are not putting a content within your div with img-wip class (<div class="col-4 img-wip">... </div>).
You are setting background-image in your CSS. And what is happening is that, the height of the flex-container is taken as the height of largest of the flex-items (This is the default behaviour in Flexbox) and in the code it is your first column which is <div class="col-8">.
If you add more content to you col-8 div, you will realize that your image will start to show more and more or If you set a height on col-4 div to the height of the image, height of col-8 div will also increase accordinly
Another scenario is directly adding the img tag in your col-4 div. In that case you will see that, full image is shown and col-8 div also takes the height of the col-4 div (as expected in flex-box).
CODE SNIPPET shows this behavior:
.img-wip {
background-image: url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="d-flex flex-row align-items-center">
<div class="col-8">
<h3>A lovely header</h3>
<ul>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<div class="col-4 img-wip">
<p>Hello</p>
<img
src="https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png"
alt=""
/>
</div>
</div>
<!-- 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.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>
</html>
</body>
</html>
CODE FOR OTHER SCENARIO: Keep HTML code same as it is and add below CSS.
CSS:
.img-wip {
background-image:
url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 60vh;
}
I am using bootstrap 4, and i want div in center in extra small(xs) devices.
Have a look at this
As you can see those 2 content are in left, i want those 2 div in center in xs devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luxo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylsheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital#0;1&family=Open+Sans:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body>
<footer class="footer-section bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="images/footer-logo.png" alt="footer-logo">
<p class="d-inline">All Rights Reserved.</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="list-unstyled list-inline mb-0 mt-3 float-md-right float-sm-right">
<li class="list-inline-item"><img src="images/fb-icon.png" alt="bf-icon"></li>
<li class="list-inline-item"><img src="images/tw-icon.png" alt="tw-icon"></li>
<li class="list-inline-item"><img src="images/dr-icon.png" alt="dr-icon"></li>
</ul>
</div>
</div>
</div>
</footer>
<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>
You would probably need to do it through CSS and add a new class to HTML. Try to add the following CSS code in your css file without the <style> tags or in your html with the <style> tags:
<style>
#media only screen and (max-width: 578px) {
.credits {
text-align:center;
}
}
</style>
and add credits class to the surrounding div like so:
<div class="col-md-6 col-sm-6 col-xs-12 credits">
<img src="images/footer-logo.png" alt="footer-logo">
<p class="d-inline">All Rights Reserved.</p>
</div>
P.S. The 578px in the CSS is the default bootstrap xs width.
As you are using bootstrap 4, there are no class with col-xs-* in it, instead you can just use col-* for example col-4 to span a column for 4 width grid on extra small devices.
Secondly as all the content in these two columns the content is inline so you can center it using text-align:center; easily on main div in media`query for small screen like:
#media only screen and (max-width: 576px) {
.footer-section {
text-align: center;
}
}
Hope it helps.
Simply add col-12 in your <div class="col-md-6 col-sm-6 col-xs-12">. Now when the screen is smaller than XS, they will be in the middle.
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.
I'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:
EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 100%;
}
#main {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<h1>Welcome</h1>
<div class="container-fluid" id="main">
<h1>This is a heading</h1>
<div class="row">
<div class="col-sm-3 div1">Left side</div>
<div class="col-sm-6 div2">Middle</div>
<div class="col-sm-3 div3">Right side</div>
</div>
</div>
</body>
</html>
Try this
.row {
height: 100vh;
}
More information here:
https://stackoverflow.com/a/16837667/7361767
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>