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
Related
I have an app that uses Bootstrap 5. In this app, I need to layout some content that looks like this:
+----------------------+-----------------------------------------------+
| Assignment Begins On | [date picker goes here] |
+----------------------+-----------------------------------------------+
| v | |
+----------------------+-----------------------------------------------+
| Continues For | [slider that fills remaining width goes here] |
+----------------------+-----------------------------------------------+
The first column need to be the same size, with the content centered. The second column needs to fill the remaining width. Based on my understanding, I should use a d-grid because I'm trying to layout things using rows and columns. However, the column sizes shouldn't be evenly sized. Instead, they should be based on a) the content of the first column and b) the space available in the parent. This made me think I should be using d-flex instead. However, if I use d-flex, I can't meet the requirements of a. So, I reverted back to using a d-grid. But now, I can't center the content in the first column because the columns aren't the same size. I currently have:
<div class="d-grid">
<div class="row">
<div class="col-auto text-center" style="background-color:yellow;">Assignment Begins On</div>
<div class="col">[date picker]</div>
</div>
<div class="row">
<div class="col-auto text-center" style="background-color:orange;">v</div>
</div>
<div class="row">
<div class="col-auto text-center" style="background-color:red;">Continues For</div>
<div class="col">[slider]</div>
</div>
</div>
I added the background-color details to show that the columns are different size. How do I display content in a grid layout in Bootstrap 5 that allows me to meet the needs of a and b?
As explained here, there's no simple solution for this problem. I'd recommend using CSS grid. It would only require a little extra CSS...
HTML
<div class="d-grid gap-2">
<div class="col text-center text-nowrap" style="background-color:yellow;">Assignment Begins On</div>
<div class="col"> Date picker</div>
<div class="col text-center" style="background-color:orange;">v</div>
<div class="col"></div>
<div class="col text-center text-nowrap" style="background-color:red;">Continues For</div>
<div class="col"> Slider </div>
</div>
CSS
.d-grid {
grid-template-columns: 0fr 1fr;
}
Codeply
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
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>
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.
I need two divs to sit side by side, and inside those divs will be divs that have bootstrap 3 classes. The problem is that when I restrict the left div, for example, to 50% by using col-xs-6, the col-xs-... classes on the child elements then only respond to their parent's width.
For clarity:
The purple divs' widths are based on a percentage of their parent, whereas I'd like them to be the same width as though they were a direct child of container whilst being able to keep them separate (and wrap them) from the other adjacent div (each div labelled col-xs-6 will be rendered from entirely different server-side controls).
NOTE: Ignore the fact I'm styling these for an XS display for now, this is only temporary while I work out the styles then I'll amend them accordingly.
For the three purple divs you would use col-xs-4
http://getbootstrap.com/css/#grid-nesting
The sum of the inner divs should add up to 12
You should add another row internally to create a new instance of your 12 columns. You might want to have a look at what Bootstrap calls Nesting Columns
<div class="container">
<div class="row">
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
</div>
</div>
try this JSFiddle