I am playing around with bootstrap 4 and I am not sure how to get my heights correctly. I have a "side nav", "header", "main" and "footer".
I want "main" to take up most of the height. However for some reason my heights must be messed up as the side nave does not go all the way down and I got this white chunk in the bottom left hand corner.
If you do full screen on my code you will see it.
body,
html,
.container-fluid {
height: 100%;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
background-color: blue;
color: white;
}
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
}
<!DOCTYPE html>
<html>
<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">
<title>test</title>
<!-- Bootstrap CSS CDN -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="wrapper h-100">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid ">
<div class="row h-100">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 h-100" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
</body>
</html>
The problem currently is the that using h-100 on the row, makes the child col-12 also set to h-100 exceed the viewport height which causes scrolling and the whitespace under the sidebar.
As of Bootstrap 4.1, there is a flex-fill util class that is helpful for this layout...
.flex-fill {
flex: 1 1 auto;
}
In this case, you can use it so that the child divs grow to fill remaining height. Just set min-height on the .wrapper:
.wrapper {
min-height: 100vh;
}
And then, make container-fluid also a flexbox container (using d-flex). Use the util flex-fill to make row and the middle col-12 fill height:
<div class="wrapper d-flex">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid d-flex flex-column">
<div class="row flex-fill flex-column">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 flex-fill" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
https://www.codeply.com/go/VvogWj44cS
Related
How would I align items in a sidebar like this:
See image
my main problems are the formatting for the footer being fixed to the bottom and the main sidebar container overflowing and scrolling but still being between the sidebar header and the sidebar bottom element text container, so not overlapping either while having that element be scrollable without the whole sidebar scrolling
what i have so far:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-dark text-white" style="height: 100vh; width:250px;">
<!-- <div class="col bg-primary">
test
</div>
<div class="col bg-danger">
test 2
</div>
<div class="col bg-primary" style="position: fixed; bottom: 0;">
test 3
</div> -->
<div class="d-flex flex-column justify-content-start mb-3">
<div class="p-2 bg-primary">
Flex item 1
</div>
<div class="p-2 bg-danger flex-grow-1">
Flex item 2
</div>
<div class="p-2 bg-primary" style="position:fixed; bottom:0;">
Flex item 3
</div>
</div>
</div>
<div class="col bg-secondary text-white">
main body
</div>
</div>
<!-- <div class="row">
<div class="col bg-secondary text-white">
main body
</div>
</div> -->
</div>
using bootstrap 5.3.0 alpha1
Here's a minimal example of how to create a full page layout with a container that should scroll on overflow using Bootstrap V5.3.
Read the docs if you like to learn how it works.
Read about flex-grow-1 or if you're new to flex start here.
Learn how overflow works.
nav {
height: 100vh;
max-height: 100vh;
background: lightgreen;
}
main {
background: lightyellow;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0">
<nav class="col-4 p-2 d-flex flex-column gap-1">
<div class="">
<h5>
Sidebar header
</h5>
</div>
<div class="">
Some content
</div>
<div class="">
Some other content
</div>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</nav>
<main class="col">
main body
</main>
</div>
</div>
</body>
</html>
If <main> should also overflow:scroll at 100vh.
Add in CSS:
main {
height: 100vh;
max-height: 100vh;
}
and in HTML:
<main class="col overflow-auto">
If <main> can grow beyond the viewport height and you want <nav> to grow along with it.
You could wrap the content inside col-4 in an absolute positioned container that fills col-4 and therefore let it grow beyond 100vh height while keeping the overflow scroll if <main> is smaller, for example:
nav {
min-height: 100vh;
background: lightgreen;
}
nav #overflow-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
main {
background: lightyellow;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0">
<nav class="col-4 position-relative">
<div class="p-2 d-flex flex-column gap-1" id="overflow-container">
<div class="">
<h5>
Sidebar header
</h5>
</div>
<div class="">
Some content
</div>
<div class="">
Some other content
</div>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</div>
</nav>
<main class="col">
main body
</main>
</div>
</div>
</body>
</html>
If <nav> and <main> should stack vertically at a smaller screen size.
In the HTML make .row a flex-column by default and a flex row on the medium breakpoint with flex-md-row. Then change col-4 to col-md-4.
In the CSS add a media query, using Bootstrap's medium breakpoint width.
Note: Snippet below is based on the example above with an absolute positioned container, but the same logic can also be applied to the other examples.
nav {
min-height: 100vh;
background: lightgreen;
}
main {
background: lightyellow;
}
#media (min-width: 768px) {
nav #overflow-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0 flex-column flex-md-row">
<nav class="col-md-4 position-relative">
<div class="p-2 d-flex flex-column gap-1" id="overflow-container">
<div class="">
<h5>
Sidebar header
</h5>
</div>
<div class="">
Some content
</div>
<div class="">
Some other content
</div>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</div>
</nav>
<main class="col">
main body
</main>
</div>
</div>
</body>
</html>
I'm having a terribly difficult time trying to get Bootstrap/Flexbox to play nice with a height restriction.
In my layout, I have a <main> element with a fixed height. In the actual app it's calculated so that the footer appears at the bottom of the screen, for demonstration it's fixed at 500px.
I want to put some arbitrary-length user data (between 1 and potentially up to 1000 lines according to API response) in a card. I would like the card to be constrained by the calculated height of its container, with a scrollbar in the card to navigate its contents. However, the card-body seems absolutely totally intent on just growing to contain all contents - I can't get any part of the hierarchy to be limited by the 500px height set on the <main> element.
Here's a simplified example. The dark bar is the footer, which is correctly positioned below the 500px <main> element. The card stretches waaaaay past it - I want the card to be contained between the top of the page and the footer, and have a scrollbar to navigate its contents.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Manage List</title>
</head>
<body>
<main style="height: 500px">
<div class="container-fluid">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row">
<div class="col-7">
<div class="card">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
</body>
</html>
Related questions I have looked at:
When flexbox items wrap in column mode, container does not grow its width
Prevent flex item from exceeding parent height and make scroll bar work
Why don't flex items shrink past content size?
white-space css property is creating issues with flex
Fitting child into parent
Flex item is not shrinking smaller than its content
I have tried min-height: 0 everywhere, flex-shrink: 1, flex-grow: 0, and other suggestions from the above questions. Really at a loss for what to do next short of pinning the height of every single element down the hierarchy with height: 100% to make sure it doesn't grow past <main>...
You need to make the container h-100 d-flex flex-column, and then h-100 on column and card. Use overflow-hidden on the row so its height is contained by the container.
<main style="height: 500px">
<div class="container-fluid h-100 d-flex flex-column">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row overflow-hidden">
<div class="col-7 h-100">
<div class="card h-100">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto"> dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
Demo
You have to work your way down the stack, applying d-flex, h-100, and flex-column as you go to get things to fit within their parent container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<main style="height: 500px">
<div class="container-fluid h-100 d-flex flex-column">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row d-flex overflow-hidden">
<div class="col-7 h-100">
<div class="card d-flex flex-column h-100">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
The key is to set height or max-height on .card-body.
Below, I calculate the height of <main> and the .card-body based on the viewport.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Manage List</title>
<style>
main {
padding-bottom: 1em;
/* viewport height minus footer height */
height: calc(100vh - 48px);
}
main .card .card-body {
/* viewport height minus footer height minus height of preceeding elements minus main padding-bottom */
height: calc(100vh - 48px - 7em - 1em);
}
</style>
</head>
<body>
<main style="">
<div class="container-fluid">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row">
<div class="col-7">
<div class="card">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
</body>
</html>
I put a frame and a picture together but my photo is not fully displayed, and in each size a part of the image is displayed, for example, for a mobile phone, only a small part of it is displayed, and in a larger and medium size, a larger part of the photo is displayed. can you help me?
My html markup:
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture height-80 img-responsive "></div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
This is my CSS:
body {
font-family: 'Roboto', sans-serif;
}
.height {
min-height: 100vh;
}
.title-underline {
width: 200px;
height: 5px;
margin: 0 auto;
}
.height-80 {
min-height: 100vh;
}
.height-11 {
max-height: 11vh;
}
.about-picture {
background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}
You can use background image as you have done, but you need to give it a size and position, and stop it repeating, otherwise it is just picking up the defaults for these values.
Here is what to put in your CSS. I have deliberately explicitly set each value so it's easier to see what is going on:
.about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Of course, you may want to change the positioning, but the size contain makes sure the whole image is always visible whatever the actual dimensions of the column on any device.
After I see your code, maybe I don't think you can put the image in the css if it's used like that. I changed your code in the css section in .about-picture.
And I also changed the html markup in this section:
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
Like this edited from me:
<html>
<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"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
width: 100%;}
.height{
min-height: 100vh;}
.title-underline{
width: 200px;
height: 5px;
margin: 0 auto;}
.height-80{
min-height: 100vh;}
.height-11{
max-height: 11vh;}
.about-picture{
align-items: center!important;
}
.about-picture img{
width: 100%;
position: relative;
padding-top: 120px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Is there a way to make scrollspy work without using nav or list-group?
Bootstrap documentation for scrollspy states that it may be used only on nav or list group components. DOCUMENTATION
How it works
Scrollspy has a few requirements to function properly:
If you’re building our JavaScript from source, it requires util.js.
It must be used on a Bootstrap nav component or list group.
Scrollspy requires position: relative; on the element you’re spying on, usually the <body>.
When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
Anchors (<a>) are required and must point to an element with that id.
This question is similar, but for Bootstrap 3 (not 4) and the answer is to add role="tablist". Well, it doesn't work here. There are many questions on SO about scrollspy, but mostly for Bootstrap 3.
CODE:
/*DEMO*/
nav{top:50%;left:1.5rem;transform:translateY(-50%)}
nav a{display:block;width:20px;height:20px;margin-bottom:.5rem}
/*COLORS*/
nav a{background:black}
nav a.active{background:red}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#nav" data-offset="0">
<section class="container-fluid">
<div class="row">
<div id="item-1" class="col-12 vh-100 bg-primary"></div>
<div id="item-2" class="col-12 vh-100 bg-warning"></div>
<div id="item-3" class="col-12 vh-100 bg-danger"></div>
<div id="item-4" class="col-12 vh-100 bg-success"></div>
<div id="item-5" class="col-12 vh-100 bg-info"></div>
</div>
</section>
<nav id="nav" class="d-flex flex-column position-fixed">
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
You can overcome this by using the required class list-group-item and reset the CSS like you want:
/*DEMO*/
nav {
top: 50%;
left: 1.5rem;
transform: translateY(-50%)
}
#nav a {
display: block;
width: 20px;
height: 20px;
margin-bottom: .5rem;
padding: 0;
border: none;
border-radius: 0;
}
/*COLORS*/
#nav a {
background: black
}
#nav a.active {
background: red
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#nav" data-offset="0">
<section class="container-fluid">
<div class="row">
<div id="item-1" class="col-12 vh-100 bg-primary"></div>
<div id="item-2" class="col-12 vh-100 bg-warning"></div>
<div id="item-3" class="col-12 vh-100 bg-danger"></div>
<div id="item-4" class="col-12 vh-100 bg-success"></div>
<div id="item-5" class="col-12 vh-100 bg-info"></div>
</div>
</section>
<nav id="nav" class="d-flex flex-column position-fixed">
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I want to create a Bootstrap grid whose second row occupies the full height of the page, in a very similar fashion to Twitter bootstrap 3 two columns full height. However, the "non-hacky" answer provided, which uses Bootstrap 4's h-100, doesn't seem to be working. Here's the code and its output:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
background-color: lightblue;
}
main {
background-color: yellow;
}
#second-row {
background-color: green;
}
textarea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main class="container-fluid h-100">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row h-100" id="second-row">
<div class="col-sm-8">
<textarea></textarea>
</div>
<div class="col-sm-4">
<textarea></textarea>
</div>
</div>
</main>
</body>
</html>
Update: Bootstrap 4: How to make the row stretch remaining height?, a similar question, has an answer that uses Bootstrap 4's flex-grow class. I tried it like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
background-color: lightblue;
}
main {
background-color: yellow;
}
#second-row {
background-color: green;
}
textarea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row flex-fill d-flex justify-content-start" id="second-row">
<div class="col-sm-8 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
<div class="col-sm-4 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
</div>
</main>
</body>
</html>
Output remains unchanged.
You should use flex-grow:1; as explained in the other answer: Bootstrap 4: How to make the row stretch remaining height?
The problem is that body should be height:100%; not min-height...
<main class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col-sm-6">
Hello,
</div>
<div class="col-sm-6">
World!
</div>
</div>
<div class="row flex-grow-1" id="second-row">
<div class="col-sm-8 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
<div class="col-sm-4 portlet-container portlet-dropzone">
<textarea></textarea>
</div>
</div>
</main>
https://www.codeply.com/go/tpecZ31njp