Empty vertical space between columns in Bootstrap 4
It's happening because Bootstrap 4 is flexbox, and all of the columns become the same height as the tallest column...
Instead of this:
------------------ ---------
| || |
| || |
------------------ | |
------------------ | |
| || |
------------------ ---------
You get this:
------------------ ---------
| || |
| || |
------------------ | |
| |
| |
------------------ ---------
| |
------------------
Usually, you can workaround this (as you tried) by nesting the columns, but then you won't get the desired column order....
Nesting:
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12 description"></div>
<div class="col-lg-12 commments"></div>
</div>
</div>
<div class="col-lg-3 sidebar"></div>
</div>
</div>
However, to get the desired column order, the columns must be contained in a single .row.
Floats:
So, the workaround in BS4 is to use floats (like BS3 did) as explained here:
Bootstrap 4 - I don't want columns to have the same height. Like this:
https://www.codeply.com/go/wnRnLl3Jmo
<div class="container">
<div class="row d-lg-block">
<div class="col-lg-9 float-left description">Desc</div>
<div class="col-lg-3 float-right sidebar">Sidebar</div>
<div class="col-lg-9 float-left comments">Comments</div>
</div>
</div>
The d-lg-block sets display:block on the row instead of display:flex which allows the columns to float in lg screen widths.
Related:
Bootstrap with different order on mobile version
Adding space between columns in Bootstrap 4
For spacing Bootstrap 4 has responsive spacing classes p-* (for padding) and m-* (for margins).
So, in your case, you could experiment by adding p-1 or maybe p-2 to all your columns to achieve the desired effect.
Note: The Bootstrap spacing classes are based on rem units, not on px because px is the old and outdated way of doing things when it comes to responsive design and accessibility.
Here's the reference link for you:
https://getbootstrap.com/docs/4.0/utilities/spacing/
The following code snippet produces the desired result by using nesting as well as the m-1 class to create margins around the columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> * { color: white; }
.black { background-color: black; }
.red { background-color: red; }
nav { background-color: antiquewhite; margin: 0px; } .head { background-color: aqua; }</style>
<div class="container-fluid"> <div class="row"> <div class="col-12 col-md m-1"> <div class="row"> <div class="col black"> <div class="row"> <div class="col head"> HEADING 0 COLUMN </div> </div> <p>aaaa<br> aaaa</p> </div> </div> </div> </div> <div class="row row-eq-height"> <div class="col-12 col-md m-1"> <div class="row"> <div class="col black"> <div class="row"> <div class="col head"> HEADING 1 COLUMNS BLACK </div> </div>
bbbb<br> bbbb<br>
</div> </div> </div> <div class="col-12 col-md m-1"> <div class="row h-100"> <div class="col red"> <div class="row"> <div class="col head"> HEADING 2 CLOUMNS RED </div> </div>cccc </div> </div> </div> </div> <div class="row"> <div class="col-12 col-md m-1"> <div class="row"> <div class="col black"> dddd </div> </div> </div> </div> <div class="row"> <div class="col-12 col-md m-1"> <div class="row"> <div class="col black"> eeee </div> </div> </div> </div> <div class="row row-eq-height"> <div class="col-12 col-md m-1"> <div class="row"> <div class="col black"> <div class="row"> <div class="col head"> HEADING 3 COLUMNS BLACK </div> </div>
ffff<br> ffff<br>
</div> </div> </div> <div class="col-12 col-md m-1"> <div class="row h-100"> <div class="col red"> <div class="row"> <div class="col head"> HEADING 4 CLOUMNS RED </div> </div>hhhh </div> </div> </div> </div></div>Add spacing between vertically stacked columns in Bootstrap 4
Here's how I ended up making this work:
.row [class*="col-"] {
@extend .mb-4;
&:last-child {
@extend .mb-0;
}
@extend .mb-md-5;
&:nth-last-of-type(1),
&:nth-last-of-type(2),
&:nth-last-of-type(3) {
@extend .mb-md-0;
}
}
Remove spacing between cols
add a class when you need to remove spaces use it
.padding-0{
padding-right:0;
padding-left:0;
}
in html write this class
<div class="row">
<div class="col-md-2 padding-0">
//stuff here for this column
</div>
<div class="col-md-10 padding-0">
//stuff here for columns
</div>
</div>
Decrease Space between Columns in Bootstrap
<div class="container">
<div class="row">
<!-- you can also resize the size of col-md-10 as of your need -->
<div class="col-md-10 mx-auto">
<div class="row text-center boxesText">
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="b1">
<i class="fa fa-comment"></i>
</div>
<span>Discuss</span>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="b1">
<i class="fa fa-comment"></i>
</div>
<span>Discuss</span>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="b1">
<i class="fa fa-comment"></i>
</div>
<span>Discuss</span>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="b1">
<i class="fa fa-comment"></i>
</div>
<span>Discuss</span>
</div>
</div>
</div>
Bootstrap: add margin/padding space between columns
Bootstrap 5 (Update 2021)
Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2 is now ps-2.
pl-*=>ps-*(padding-left)pr-*=>pe-*(padding-right)ml-*=>ms-*(margin-left)mr-*=>me-*(margin-right)
Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row instead of each col-* inside the row. For example, use g-0 for no spacing between columns.
Bootstrap 5 column spacing demo
Bootstrap 4 (Update 2018)
Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...
Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
Bootstrap 4 Column Spacing Demo
Notes
- Changing the left/right margin(s) on
col-*will break the grid. - Change the left/right margin(s) on the content of
col-*works. - Change the left/right padding on the
col-*also works.
Bootstrap 4 elegant vertical column gap
As an option - reformat your html and use bootstrap spacing:
<div class="col-md-2 p-0">
<div class="content mr-2">
1 of 2
</div>
</div>
<div class="col-md-10 p-0">
<div class="content ml-2">
2 of 2
</div>
</div>
Related Topics
Calling Wkhtmltopdf to Generate Pdf from Html
How to Make an Editable Div Look Like a Text Field
Ordered List (Html) Lower-Alpha With Right Parentheses
Inline Elements and Line-Height
Chrome Download Attribute Not Working
Why Does the Checkbox Stay Checked When Reloading the Page
Canvas Drawings, Like Lines, Are Blurry
How to Remove the Gutter (Spacing) Between Columns in Bootstrap
How to Specify a Local File Within HTML Using the File: Scheme
Animate/Shrink Navbar on Scroll Using Bootstrap
Why Is There a Vertical Scroll Bar If Parent and Child Have the Same Height
Accessing Object in Iframe Using Vba
How to Display the Checkbox Over the Images For Selection
Space Between Nowrap Inline Blocks
Curved Div With Transparent Top
How to Access a Mobile'S Camera from a Web App
Align Image in Center and Middle Within Div
CSS Data Attribute New Line Character & Pseudo-Element Content Value