i've been struggling with this problem for the past two days. I have a web dashboard which displays charts or table on cards. These cards may have different size depending on which chart or table is rendered inside it. They are inside bootstrap nav tab content.
When i use a defined col size, such as col-md-3 or col-sm-4 or even only col evertyhing works just fine. However, when using col-auto, it "overflows" horizontally beyond the screen, row and even the container.
Below is the presentation code i removed from my angular app
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap grid problem</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-11 col-md-11">
<ul class="nav nav-tabs border-0" id="tabMenu" role="tablist">
<li class="nav-item mr-1" *ngFor="let route of routeLinks; let i = index;">
<a class="nav-link" data-toggle="tab" (click)="activeLinkIndex = i" [ngClass]="{ 'active': activeLinkIndex === i, 'text-light': activeLinkIndex !== i, 'bg-azul-escuro': activeLinkIndex !== i,
'bg-cinza-claro': activeLinkIndex === i, 'text-azul-escuro': activeLinkIndex === i,
'font-weight-bold': activeLinkIndex === i }" [routerLink]="route.link">{{route.title}}</a>
</li>
</ul>
<div class="tab-content" id="tabMainContent">
<div class="tab-pane fade show active" id="central" role="tabpanel" aria-labelledby="central-tab">
<div class="row">
<div class="col-lg-12 col-md-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 bg-light rounded-0 ">
<fa-icon [icon]="faHome" class="mr-2 text-dark"></fa-icon>
<li class="breadcrumb-item">Main</li>
<li class="breadcrumb-item active" aria-current="page">Consolidated</li>
</ol>
</nav>
</div>
</div>
<div class="row bg-light py-3 rounded-top text-white">
<div class="col-auto bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
<div class="col bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
<div class="col bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
Related
I started to work on Bootstrap and created a card according to the documentation. The card seems to be centered vertically on the page, but not horizontally (it is more in the first part of the page). I would like to have the card (using only Bootstrap if possible) in the center of the page completely (so horizontally too).
I tried using .mx-auto for .card and other various solutions I found online that worked for everybody else. I am out of solutions at the moment and I don't know how to solve it.
Can you please take a look at my code and provide some feedback?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<style>
body {
background-color: rgb(184, 27, 184);
}
</style>
<body class="d-flex">
<div class="container my-5"> <!--Bootstrap always starts with a container; my = margin on the y axis, top & bottom-->
<div class="row align-items-center justify-content-center w-100">
<div class="col-lg-3 col-7">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="Black puppy">
<div class="card-body">
<h5 class="card-title">Lola</h5>
<p class="card-text">Is she the next member of your family? She is eager to meet you.</p>
</div>
<ul class="list-group list-group-flash">
<li class="list-group-item">Love ball of only 7 kg</li>
<li class="list-group-item">Shy at first, but very friendly after</li>
<li class="list-group-item">Enjoys walks by the river</li>
</ul>
<div class="card-body">
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Adopt today</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Thank you!
I am trying to fix a bug in this website, so I reproduce the problem in the sandbox below
https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html
So right now the problem is when ever you change the img inside,if the size is different, the layout will extend to different height.
You can see as the image change the layout height will change as well, I tried "height" but this will ruin the responsive feature of it, is there any way to mantain the same height but still be able to be responsive?
<!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://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<section class="py-4 d-flex flex-column align-items-center bg-dark text-white min-height">
<div class="container">
<div class="row">
<div class="col-md-5 d-flex justify-content-end flex-column main-heading">
<h1 class="display-3 pb-3">Hello</h1>
<span class="text-info lead">One two three</span>
</div>
<div class="col-md-7 d-md-flex justify-content-center align-items-center flex-column">
<img src="https://i.imgur.com/l4Zvchl.jpg" class="img-fluid lazyload" alt="Page Wallpaper" />
</div>
</div>
</div>
</section>
<!-- 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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can try to add this style="object-fit: cover; width: 100%; height: 300px;" to your img element (you can customize it with class), but your image will be cut off a bit due to fixed height as a trade-off.
Mobile size
Desktop size
https://codesandbox.io/s/restless-fire-bp6vcv?file=/index.html:1095-1141
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>
So I've been working on this for the better half of 2 weeks now and can not seem to get this to work out as intended. I'm starting to think that it might be an issue with how deep the rows/columns in question are, but would really like to get some outside insight.
In short, it is the page with -> 2 rows in which the second row contains -> 2 columns in which the second contains -> 3 rows being a breadcrumb, the main content of each page and a footer. Should the page need to extend the nav should remain static. I vaguely recall when starting out seeing some posts of people trying to do a similar layout, but have not been able to find those posts again.
Below is the code in question in as stripped down a form as I could get it:
<!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 and self-made CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- various imports -->
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet">
<style>
html, body{
height: 100%;
width: 100%;
}
h2 {
font-family: 'Chivo', sans-serif;
}
</style>
</head>
<body style="background-color: #000;"> <!-- bgc: black -->
<div class="container-fluid h-100">
<div class="row h-25"style="background-color: #F00;"> <!-- bgc: red -->
<div class="col">
<h1>In the header!</h1>
</div>
</div>
<div class="row h-75" style="background-color: #0F0;"> <!-- bgc: green -->
<div class="col-sm-2 no-gutters h-100" style="background-color: #00F;"> <!-- bgc: blue -->
<nav>
<h2>In the nav bar!</h2>
</nav>
</div>
<div class="col-sm-10 no-gutters h-100" style="background-color: #FF0;"> <!-- bgc: yellow -->
<div class="row align-items-start" style="background-color: #FFF;"> <!-- bgc: white -->
<div class="col">
<main>
<h2>In the breadcrumb!</h2>
</main>
</div>
</div>
<div class="row align-items-center" style="background-color: #0FF;"> <!-- bgc: cyan -->
<div class="col">
<main>
<h2>In the main!</h2>
</main>
</div>
</div>
<div class="row align-items-end" style="background-color: #F0F;"> <!-- bgc: magenta -->
<div class="col">
<footer>
<h2>In the footer</h2>
</footer>
</div>
</div>
</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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My questions are:
1. Can a layout like this even be done in bootstrap4?
2. If it can, what changes are needed to make it work?
3. The "nav column" when collapsing on smaller screens remains at h-100 instead of shrinking, am I using the subclasses correctly for the fluid scaling?
Sorry, I don't have much experience using rows and containers in bootstrap 4, however I can provide you flexbox implementation of such a layout. If you understand flexbox, you can use the below code as reference to create your own layout.
Following is a barebone flexbox code to achieve the layout hierarchy you have mentioned. I realize it's not the best of answers, but hope it helps.
<div class="container-fluid d-flex flex-column" style="height: 100%"> <!-- Main container declared as flexbox column -->
<div class="h-25"> <!-- Row 1 in the container -->
</div>
<div class="h-75 d-flex row"> <!-- Row 2 in the container. This itself is a flexbox row -->
<div class="col-sm-2"> <!-- Column 1 of the row -->
</div>
<div class="col-sm-10 d-flex flex-column"> <!-- Column 2 of the row -->
<div> <!-- Row 1 of the column -->
</div>
<div> <!-- Row 2 of the column -->
</div>
<div> <!-- Row 3 of the column -->
</div>
</div>
</div>
</div>
Refer to boostrap4 flexbox document to understand flexbox https://v4-alpha.getbootstrap.com/utilities/flexbox/:
EDIT
Here's a working plunker : https://plnkr.co/edit/WWT5XoHyvLf2paKQItSH?p=preview
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
I'm in the process of learning bootstrap and am struggling very hard. I know that the default row height in bootstrap is whatever height will be able to contain a child element (i.e. a column). However, the default height of a column is to take up the minimum amount of space.
So my question: How do I force the height of a column to take up the height of the row? Let's say I have two columns in a row. The height of one column is greater than the other due to the contents of a column being more. How do I force the sibling column to be the same height?
I feel like I've tried everything and am having no luck. I've tried using the flex properties, the table properties, but nothing is working.
Also, is it good practice for me to be modifying the css of bootstrap classes? Couldn't this possibly break the entire framework?
TLDR: What is the best method for declaring div heights in bootstrap?
As an example, how would I get both of the 'hello there' divs to occupy the same height in the same row?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffeedev Data Dashboard</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.3.6/css/bootstrap.min.css">
<style> body { padding-top: 70px;} .col-md-9{height: 100%}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Plot</li>
</ul>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid ">
<div class="row">
<div class="col-md-3">
<div class="alert alert-success" role="alert">
<h3> Hello there!</h3>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-md-9">
<div class="alert alert-success" role="alert">
<h3> Hello there!</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
Hi there!
</div>
</div>
</div>
</body>
</html>
Edit: Attempting with .row-eq-height. Still no luck.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffeedev Data Dashboard</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.3.6/css/bootstrap.min.css">
<style> body { padding-top: 70px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Plot</li>
</ul>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid ">
<div class="row row-eq-height">
<div class="col-md-3" style="background-color: red">
Hello!
<br>
<br>
<br>
</div>
<div class="col-md-9" style="background-color: red">
Hello!
</div>
</div>
</div>
</body>
</html>
if you just wand to control the height you can specify the height in your own css like;
#myCustomDivId{
height: 10em;
}
em will be scale to the screen size. just playing about with the number until it looks the way you want.