Add gutter to bootstrap flexbox grid - html

I'm trying to add gutters to a Bootstrap 4 site. I'm also using enable-flexbox:true;
I'm trying to achieve a look like http://designmodo.com/bootstrap-4-flexbox/:
There are equal gutters on the bottom of each item, and to the right of each item.
My code is pretty simple:
<div class='row'>
<div class='col-md-6 block'>
</div>
</div>
and
.block {
background: black;
height: 200px;
}
However, this doesn't create gutters. All the blocks are connecting. I realize I can put block as a new div under .col-md-4, but that ruins flexbox responsiveness.

A simple method of changing bootstrap's default gutter size
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

Related

Bootstrap 4 full width grids

I can't figure out how to make the grids to extend to the container's full width no matter how many columns there are
<div class="container">
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md-9 second"></div>
</div>
</div>
In the example above are displayed 2 columns inline and the .row having full width.Yet if i remove the first div(keeping the exact same code), the second div will change its position to left and will keep the original width.I need it to stretch to the full width of the container.The reason i need this is because i'll have some php conditional expression that will prevent it from showing,in which case i want the template to change and the second div to be full width and position on the middle.
I found an answer with the following CSS which indeed worked but it also messed the responsive structure and i'll have to patch it up till no end probably:
CSS:
.row{
display: table;
width: 100%;
}
.first, .second{
display: table-cell;
float: none;
}
.second{
width: 100%;
}
Since i'm a newbie with Bootstrap, i was wondering if there is any built in class which solves this problem? Thank you
In this case, just have the first div as col-2 and the second one as col.
col will be 100% width if col-2 is missing, but if it is there, col will fill the remaining columns.
Check out the Grid system documentation.
I'm not sure why you're using display:table. Just use Bootstrap 4 auto-layout grid, and the second will fill the width if the first is missing/hidden.
"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."
https://www.codeply.com/go/igkSq57Vwn
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md second"></div>
</div>
i have same problem . and you can fix it by set (margin : 0px) for row (by style attribute or id in css file) and set (padding : 0px) for col (by style attribute or id in css file)

Bootstrap - does all 'rows' MUST be followed with a column?

I know this is a silly question, but I can't seem to find an answer on the net for this. For bootstrap, I know you use rows and cols to specify the size of the row. But if I have something like this:
<div class='row'>
<div class='col-md-12'></div>
</div>
Is there any point in adding that col-md-12? I would of thought just sticking the row class is enough if you wanted the full length of the row??
Any advice on this will be greatly appreciated.
Thanks
Yes, you probaly want the col. Inspect it with your browser's developer tools. You'll see margin /padding and other styling gets applied to .col-* to get things to line up properly.
The .row class primarily provides the "float clearing" that columns provide.
Columns as you know allow for a variety of "grid layout" widths / sizes, and automatically adjust to responsive browser size needs.
Run the snippet below to see the difference (click the "Full Page" link, otherwise it's compressed into a small view). (Note that I've added borders to rows / cols to highlight what's going on):
.row {
border: 1px solid red;
}
[class^="col-"] {
border: 1px solid black;
}
.other {
border: 1px solid blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12">
This is a row with a full-width column.
</div>
</div>
<div class="row">
<div class="col-sm-4">
This row has a few smaller column.
</div>
<div class="col-sm-4">
This row has a few smaller column.
</div>
<div class="col-sm-4">
This row has a few smaller column.
</div>
</div>
<div class="row">
This row has no columns.
</div>
<div class="other">This has no columns nor rows.</div>
</div>
A .row and a .col-X-X are different things. Yes, you will need the column + a row.
If you use Bootstrap 4, you can just use the .col class whereas in Bootstrap 3 you must use .col-X-12 for full width.
From the bootstrap 3 docs
1) Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
2) The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
If you want your row to be 100% width, then there is no need to have a .col div within your .row div. However, having one is useful if you want the default Bootstrap .col styling to be applied to it (such as padding and margin).

Finding cause of horizontal scroll on bootstrap site

This issue has been fixed thanks to Manoj Kumar
I can't for the life of me fix the root cause of whitespace on the right side of a site I'm currently building, causing the dreaded 'accidental horizontal scrollbar.' It's especially noticeable on mobile.
http://bradfordkolumbic.com/ma/v2/
I've tried every trick I can think of. Using overflow-x: hidden on the body somewhat fixes the issue but I'm not at all about band-aid fixes - I'm attempting to find the full solution.
You have two problems, each with your markup and style sheet.
First you need to remove this:
.info-box {
padding: 20px 0 40px;
}
The above code is overriding the default padding of the col-* classes which was by default added to compensate for the negative margins provided by row classes.
and then in the below code:
<div class="row">
<div class="col-lg-12 text-center">
<div class="row">
<div class="container-fluid text-center partners"></div>
</div>
</div>
You have wrapped a container-fluid element within a row element, while you need to do the reverse.
Bootstrap grid documentation
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Output:

Responsive 4 box grid from two to one columns

I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.
Here is a sketch of the responsive grid:
Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :
DEMO (resize the result window to see the effect)
Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.
When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.
Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.
Hopefully this helps!
Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want).
Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.
I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.

How to remove the gutter (spacing) between columns in Bootstrap?

How can I remove the 30px gutter between columns? But without setting margin-left:-30px?
<div class='container'>
<div class='row'>
<div class='col-lg-1'></div>
<div class='col-lg-1'></div>
<div class='col-lg-1'></div>
</div>
</div>
Update 2021
Bootstrap 5 the .no-gutters class has been replaced with .g-0. Use it on the .row where you want no spacing between columns.
Bootstrap 5 also has new gutter classes that are specifically designed to adjust the gutter for the entire row. The gutters classes can be used responsively for each breakpoint (ie: gx-sm-4)
use g-0 for no gutters
use g-(1-5) to adjust horizontal & vertical gutters via spacing units
use gy-* to adjust vertical gutters
use gx-* to adjust horizontal gutters
Bootstrap 4 now includes a .no-gutters class that you can just add to the .row.
<div class="row no-gutters">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
Bootstrap 4: http://codeply.com/go/OBW3RK1ErD
Bootstrap 3.4.0+ gutters are created using padding, but they added a .row-no-gutters class. See the documentation for Bootstrap 3.4 and look for 'Remove gutters'.
HTML you can use:
<div class="row row-no-gutters">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
Bootstrap 3+, <= 3.3.9 gutters are created using padding. You also must adjust the negative margin so that spacing around the outer columns is not affected.
.no-gutter {
margin-right: 0;
margin-left: 0;
}
.no-gutter > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
Just add the no-gutter class to the .row.
Demo: http://bootply.com/107458
A better way to remove padding on the columns would be to add a .no-pad class to your .row:
<div class="row no-pad">
...and then add this CSS.
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
It's a bad idea to look for first- and last-child items as actually the .row is meant to take care of those offsets at the viewport's right and left. With the above method all .col-*s remain identically styled, which is also much simpler when considering responsiveness, especially stacking at mobile sizes (try my demo below md size).
The direct-descendant CSS selector > means that the .no-pad will only be applied to that .row's immediate child .cols, so you can have padding on subsequently nested column structures (or not) if you wish.
Also using the attribute selector [class*='col-'] means that each column needs no extra non-Bootstrap classes added.
Here is a demo: http://www.bootply.com/Ae3xTyAW5D
Instead of applying fixes that are difficult to maintain, I suggest generating your own customized version of Bootstrap from the Customizer where you can set the gutter to size you want (or remove it totally, by setting it to 0).
Bootstrap 3 introduced the .row-no-gutters class in v3.4.0, which works exactly as advertised.
To remove the gutters from a row and its columns, just add this class to the <div>.
Change button link style.
<... class="bth btn-link noMarginPaddingBorder" ...>
.noMarginPaddingBorder{
margin:0 !important;
padding:0 !important;
border: 0 !important;
}