In the doc and in the issues of Bootstrap v4 (here), I can't see any plan on supporting flex-grow, something with a syntax like this for example:
<div class="d-flex">
<div class="flex-grow">
I use all the space left
</div>
<div>
I am a small text on the right
</div>
</div>
Here a sample of the layout I'd like to create:
The export button is always on the right, and the navigation button takes all the space left and therefore looks clean.
Is it possible to build such a layout already? Maybe it is not advised? Of course, there are workarounds using CSS, but I am looking for a clean solution, ideally using Bootstrap class names only to guarantee consistency.
use .col for a simple flex-grow: 1;. It's described here https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
I use all the space left
</div>
<div class="col-sm col-sm-auto">
I am a small text on the right
</div>
</div>
</div>
For anyone comming here from a google search (like me).
Since Bootstrap v 4.1 there are flex-grow and flex-shrink utilities, as the documentation says you can use them like this:
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
Here is a little example
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-row">
<div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
Grow 1
</div>
<div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
Grow 0
</div>
<div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
Grow 1
</div>
</div>
I created a class for this, I checked the Bootstrap docs and found nothing about it.
.flex-2 { flex-grow: 2 }
col-auto takes the remaining space but if you have more than one row, so space won't be distributed equally. That's why flex-grow does the trick.
Related
I have a block:
<div class="height: 400px; padding-left: 20px"></div>
How to make vertical line on the left side of block using tailwind?
I try to achive this:
I'm not sure if I understand your question well, but need to read tailwind docs to understand how tailwind works, so here is what I did I hope it's what you are looking for :
<script src="https://cdn.tailwindcss.com"></script>
<div class='h-screen w-screen'>
<div class="h-[400px] bg-green-300 w-[20px]"></div>
</div>
You can do it with to divs. You have to use flex box (flex) system to align the to divs next to each other. Then you can set the height h-[400] and the padding pl-[20]. pl-* means padding-left.
example
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-[400px] p-2">
<div class="bg-blue-700 w-1"></div>
<div class="pl-[20px]">Hello</div>
</div>
height:auto;
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-auto p-2">
<div class="bg-blue-700 w-1"></div>
<div class="pl-[20px]">Hello</div>
</div>
Please see code snipped: I am trying to align the divs with "Learn More" at the bottom of the columns at the same vertical height regardless of the height of the previous div.
Duplicate Disclaimer: I've been looking at How can I make Bootstrap columns all the same height? and How can I make Bootstrap 4 columns all the same height? which seem to be a similar problem. However, the solutions do not work for me as they are mostly for BS3 (e.g. I tried the examples with class="row-eq-height"), and most answers with regard to BS4 imply that the equal height is default in BS4.
However as you can see from the red borders, only the outer column height is "stretched" to the bottom by default, the inner one is only equal to text height. I'm very confused.
* { border: 1px solid red !important; }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 1
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">one line text example</p>
</div>
<div class="align-items-end">
Learn more 2
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 3
</div>
</div>
</div>
</body>
Also, I've tried various Bootstrap alignment options such as strechting the middle div with "align-items-stretch" and using "d-flex align-items-end" for the last div. Nothing works.
Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.
* {
border: 1px solid red !important;
}
.body-block-3 {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.flex-1 {
flex: 1;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
</div>
</body>
EDIT: Also wanted to mention you could use a boostrap utility class mb-auto instead of flex-1
<div class="col-sm-4 d-flex flex-column">
<div class="mb-auto">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
However your upper div will not take up the entire space (stretch), not sure if this is an issue with your use case. If not, you would not have to make any new classes and would be following the docs on bootstrap's with align-item section
EDIT: Updated for .body-block-3 class
I am starting out with bootstrap here and I want my page to limit itself to 1170px which is the container class standard, but I want the color to continue across the full width of the page.
The only idea I can think of is:
<div class="container-fluid BGtoExtendWholePage headerBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Header
</div>
</div>
</div>
</div>
<div class="container-fluid BGtoExtendWholePage ContentBG">
<div class="container">
<div class="row">
<div class="col-12">
Main Body of Page - Main Content
</div>
</div>
</div>
</div>
There's big arguments against nesting containers in Bootstrap (cue the person to post a link to the bit of documentation saying not to) but I found this to work.
You nest a container within a container-fluid - note the use of p-0 to remove the padding from the inner container.
<div class="container-fluid bg-red mb-3">
<div class="row">
<div class="container p-0 mt-6 mb-6">
...
</div>
</div>
</div>
If you want a full-width background color that is the same in your whole project then you could simply add a <body> tag at the beginning and end of your code (if it isn't already there) and add the following to your CSS
body {
background-color: color-choise;
}
Fill in the color-choise with the color you want it to be.
I'm switching to bootstrap4 today. I enabled flexbox in _variables.scss yet I'm confused about what exactly is flexbox capabilities of bootstrap4. For example
How can I make flex-direction:column?
Is it possible to have a column with fluid width? flex-grow?
I have this markup to build a full height sidebar layout
<div class="flex-col">
<div class="flex-row" id="topnav">
<div class="flex"> <!-- this will grow -->
Brand
</div>
<div> left navbar</div>
</div>
<div class=" flex flex-row"> <!--flex expand to fill full height -->
<div class="sidebar">Sidebar</div>
<div class="flex">Content</div> <!--take rest of row space-->
</div>
</div>
How can I achieve this with bootstrap flexbox?
Read the docs at: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
You just need to enable flexbox, and the row, col-* use flexbox. BS3 uses flex-wrap and flex-direction:row, instead of flex-direction:column The new auto-layout columns use flex-grow to consume the remaining space in a row.
<div class="row">
<div class="col-xs-4">
4
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs">
grow
</div>
</div>
Demo: http://www.codeply.com/go/rZNj0SSRmi
Update
In Bootstrap 4 alpha 6, flexbox is now the default so it no longer needs to be enabled. There are also new flexbox utilities for various properties like flex-column, justify-content-, align-items- etc.. The auto-layout columns can still be used to "grow` width or height.
<div class="container-fluid">
<div class="row">
<div class="col-3 sidebar">Sidebar</div>
<div class="col">Content</div>
</div>
</div>
Bootstrap 4 A6 example fluid layout
Because of inherited html parts when using template engines such as twig (PHP) or jinja2 (python), I may need to nest rows like below:
<div class="container">
<div class="row">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
<div class="row">
...
</div>
</div>
Then should I wrap inner rows in column div like below:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
</div>
<div class="row">
...
</div>
</div>
Or should they be wrappered in container again?
You shouldn't wrap the nested rows in .container elements, but you should nest them in columns. Bootstrap's row class has negative left and right margins that are negated by the col-X classes' positive left and right margins. If you nest two row classes without intermediate col-X classes, you get double the negative margins.
This example demonstrates the double negative margins:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
<div class="row">
<div class="col-xs-12" style="background: lime;">
<div class="row">
Here's my text!
</div>
</div>
</div>
</div>
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
<div class="row">
<div class="row" style="background: tomato;">
Where's my text?
</div>
</div>
</div>
For further reading, The Subtle Magic Behind Why the Bootstrap 3 Grid Works explains the column system in great and interesting detai.
You shouldn't wrap them in another container - containers are designed for a typical one-page layout. Unless it would look good / work well with your layout, you may want to look into container-fluid if you really want to do this.
tl;dr don't wrap in another container.