Bootstrap 4 how to have margin between columns without going over space
If you set margins on the columns it will "break" the Bootstrap grid. The spacing between the columns (gutter) is created with padding. Therefore, you should add another container/box inside the columns for the shadow, and then adjust the column padding as desired:
<div class="row">
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Some title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Another title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">One more title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
</div>
https://www.codeply.com/go/aQBL68BvFU
How do I add a margin between bootstrap columns without wrapping
You should work with padding on the inner container rather than with margin. Try this!
HTML
<div class="row info-panel">
<div class="col-md-4" id="server_1">
<div class="server-action-menu">
Server 1
</div>
</div>
</div>
CSS
.server-action-menu {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
background-repeat: repeat;
border-radius:10px;
padding: 5px;
}
How can I add margin between three Bootstrap columns without them wrapping?
Only way I saw around this was to nest other elements.
<div class="container">
<div class="row">
<div class="col-4"><div class="col-12 background-color m-3">1</div></div>
<div class="col-4"><div class="col-12 background-color m-3">2</div></div>
<div class="col-4"><div class="col-12 background-color m-3">3</div></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.
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>
Margin between columns
If I understand you correctly, you are talking about the spacing between the column items.
Since Bootstrap columns are managed via CSS flexbox since version 4, you can easily achive your goal by also using flexbox utilities.
In this case you only need to set the gap (or column-gap) property for your second row element. And instead of fixed column size classes (col-x) use auto sized col class.
.my-gap-row {
gap: 20px;
}
<div class="row">
<div class="col">
My blue section
</div>
</div>
<div class="row my-gap-row">
<div class="col">
Grey section 1
</div>
<div class="col">
Grey section 2
</div>
<div class="col">
Grey section 3
</div>
</div>
How to add spacing between columns?
You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
In Bootstrap 4 use: offset-2 or offset-md-2
Related Topics
How to Increase the Bullet Size in a Li
CSS Padding Overrides Overflow
Difference Between "A" and "A:Link"
CSS Property Box-Reflect Compatibility
:First-Letter Selector Doesn't Work for Link
How to Fade in Background Image by CSS3 Animation
Bootstrap 5 Off Canvas Missing CSS/Js
Expanding Cells in CSS Grid Layout
Apply Style to First Element in a Row of Similar Elements
Bottom-Border Hover Transition
Internet Explorer and Safari Mobile CSS Filter Invert
How to Escape String CSS in SASS/Scss
Is There a CSS Selector for the First Child, Taking Text Nodes into Account