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
Related
Maybe is a dumb question, but i still don´t understand it correctly. I´m seeing the bootstrap v5 documentation and there are a lot of changes from v4 and one of them are the gutters.
Can anyone explain me what is the difference in using gutters vs margin utilities?, When is recommended to use margins and when gutters?
Thanks for your help!
Gutters only apply to the Bootstrap grid, while margins can be used anywhere.
Gutters specifically adjust the margins & padding on the Bootstrap grid row and col which effects the spacing between columns inside the row.
Other the other hand, margins could be used on any element.
The gutters are more efficient for changing grid spacing. Margins/padding could still be used to accomplish the same effect, but would require changes on every column. For example, the following rows appear the same, but using gutter on the 1st row is less markup...
<!-- no gutters to 0 -->
<div class="row gx-0">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<!-- no gutters using margins and padding -->
<div class="row m-0">
<div class="col px-0">
</div>
<div class="col px-0">
</div>
<div class="col px-0">
</div>
<div class="col px-0">
</div>
</div>
Demo
I am using this structure but
<div class="row">
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
</div>
For some reason the has as much padding as it would take to "match" the next div in the horizontal row. For example, if the first div is text, then the second is text, and the third is an image...the first two divs "grow" to be the size of the third. I thought with this Bootstrap 4 it was supposed to be flexible? Thanks.
Bootstrap 4 utilizes flexbox (display: flex) for a lot of it's layout, including it's cards. That is the reason that all the cards grow in accordance to it's siblings. You can learn more about flexboxes here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
You're using col-sm-4 which will make all the columns be the same size which may be what you're referring to as the first two divs grow. If you mean something else, I would look into how Bootstrap 4 works with flexbox which may also help you understand how the columns act in Bootstrap 4
Sometimes the images can push out the divs. Set a style to the image to be width: 100% and see if that makes any difference
Ok this works. Thanks everyone above for your help, I took many things from it to get the answer. It turns out if I'm reading this correctly flex itself won't allow for "three columns with shrunken divs" so one div can be bigger than the others but they all shrink to their own respective sizes around their content. So I used Masonry. I just included the .js in my head section as a script reference then added the below. If you aren't using .NET (meaning you're using PHP) just erase out the itemtemplate and repeater stuff...the code is the same for you.
<div class="row" style="display:flex;" data-masonry='{ "gutter": 0, "itemSelector": ".col-4" }'>
<asp:repeater id="ItemsList" runat="server">
<div class="card">
I want to add a sticky header to my page and bootstrap provides a class for it, also I added a container to center the content and make it as wide as the content below.
But when I add a row and 12 columns not the full width of the container is taken, see below for the code.
<nav class="navbar fixed-top navbar-light sticky-header">
<div class="container sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
You could add a class to your row like so:
EDIT: As ZimSystem pointed out, there is a w-100 class in bootstrap, so just do:
<div class="row w-100">
Your Elements
</div>
This should get you 100% of the containers width.
Working sample: https://www.bootply.com/J5gKTedgPr
The Bootstrap 4 Navbar isn't designed to contain the grid rows and cols. It's designed to contain the support content.
When you use a container inside a navbar it makes the container display:flex which is making the row you have in the container align to the start (left-side) of the container which won't fill the width.
As a workaround/hack you could revert the container to display:block using d-block, and then remove the default left/right padding from the navbar using px-0:
https://www.codeply.com/go/T81SqA32rJ
<nav class="navbar fixed-top sticky-header px-0">
<div class="container-fluid d-block sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
I am trying to include a bootstrap grid inside another grid and make sure it is still responsive but on larger screens the child grid doesnt collapse.
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<!-- child grid -->
<div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-md-6">column content</div>
</div>
</div>
</div>
</div>
bootsplay link: http://www.bootply.com/PCMV1BF4YF
the child grid should collapse in larger screens because the width of the parent class is already small. Is it possible to get around this issue?
Inner col-*-* should also be contained in a row. Read the Bootstrap docs on nesting
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-lg-6">Second column content</div>
</div>
</div>
</div>
</div>
Make the inner grid col-lg-* if you want it to stack/collapse before the outer grid does. The breakpoint (when the columns stack) depends on the viewport width, not the width of the parent container.
Also, instead of overriding the Bootstrap container, use a custom class.
http://www.bootply.com/aoUZozmcsc
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>