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 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 to add margin between Bootstrap cards without triggering flex-wrap?
First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.
I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.
col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.
With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.
I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row w-100 m-0 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">when an unknown</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
</div>
</section>Bootstrap add space in between cols without breaking row
The reason why it breaks the rows is because you are using the Bootstrap column classes incorrectly. Those are supposed to be used as containers for your content i.e. you are not supposed to add any custom styling (of the kind you did) to your columns because that would lead exactly to the problems you have now.
To solve this, you wrap your column content in divs and then use your custom class giveButton on those divs. That gives you the freedom to apply any styling you want while still letting Bootstrap do its job when it comes to spacing and responsiveness etc.
To make your buttons span full width I added the native Bootstrap class w-100 (width:100%) to the divs and also added the Bootstrap class text-center to center things. Done!
Now, the Bootstrap gutters automatically create neat spacing but you can control it further by applying Bootstrap spacing classes to your columns. For example, px-* with a value between 0 and 5 instead of * will control the horizontal padding and py-* will control the vertical padding.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.stripe-button-el
{
visibility: hidden !important;
}
.giveButton {
background: #3D94F6;
background-image: -webkit-linear-gradient(top, #e9e9e9, #f8f8f8);
background-image: -moz-linear-gradient(top, #e9e9e9, #f8f8f8);
background-image: -ms-linear-gradient(top, #e9e9e9, #f8f8f8);
background-image: -o-linear-gradient(top, #e9e9e9, #f8f8f8);
background-image: linear-gradient(to bottom, #e9e9e9, #f8f8f8);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
color: #747474;
font-family: Open Sans;
font-size: 46px;
font-weight: 100;
padding: 1px;
box-shadow: 1px 1px 7px 0px #000000;
-webkit-box-shadow: 1px 1px 2px 0px #000000;
-moz-box-shadow: 1px 1px 2px 0px #000000;
text-shadow: 3px 0px 5px #d4d4d4;
border: solid #bababa 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
font-family: 'Anton', sans-serif;
}
.giveButton span{
top: -15px;
position: relative;
left: -6px;
font-size: 33px;}
.giveButton:hover {
background: #1E62D0;
background-image: -webkit-linear-gradient(top, #0c8955, #71f68f);
background-image: -moz-linear-gradient(top, #0c8955, #71f68f);
background-image: -ms-linear-gradient(top, #0c8955, #71f68f);
background-image: -o-linear-gradient(top, #0c8955, #71f68f);
background-image: linear-gradient(to bottom, #0c8955, #71f68f);
text-decoration: none;
color: white;
}
.SelectedButton
{
background-image: -webkit-linear-gradient(top, #0c8955, #71f68f);
background-image: -moz-linear-gradient(top, #0c8955, #71f68f);
background-image: -ms-linear-gradient(top, #0c8955, #71f68f);
background-image: -o-linear-gradient(top, #0c8955, #71f68f);
background-image: linear-gradient(to bottom, #0c8955, #71f68f);
text-shadow: 3px 0px 5px #7c7c7c;
color: white;
}
</style>
<div class="container">
<div class="row">
<div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>25</div></div>
<div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>50</div></div>
<div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>100</div></div>
</div>
<div class="row">
<div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>250</div></div>
<div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>500</div></div>
<div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>1,000</div></div>
</div>
<div class="row">
<div class="col-12 text-center">
<div class="giveButton w-100"><span>$</span>5,000</div>
</div>
<div class="col-12 text-center">
<div class="giveButton w-100"><span>$</span>10,000</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.
Bootstrap 4 change spacing between columns wraps underneath instead of side to side
The gutter (spacing between columns) is created with padding, not margins. When you adjust the margins it throws off the grid. You can use inner DIV's...
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-6 text-light text-center">
<div class="bg-dark mr-1">Hello</div>
</div>
<div class="col-6 text-light text-center">
<div class="bg-danger">Hello</div>
</div>
</div>
</div>
or, force the row no to wrap with flex-nowrap...
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
or, simply use the padding utils to adjust the column spacing.
https://codeply.com/go/p4NpmmRxmb
Margin around two Bootstrap columns causing to break to next line
Something like this will work.
But now I'm trying to figure out, how to get equal spaces.
.block {
background: url('https://gmsrp.cachefly.net/images/19/12/18/135acb4a87157a536a861995694f7b79/320.jpg');
border-radius: 5px;
height: 120px;
margin: 10px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6">
<div class="block">
</div>
</div>
<div class="col-6">
<div class="block">
</div>
</div>
<div class="col-6">
<div class="block">
</div>
</div>
<div class="col-6">
<div class="block">
</div>
</div>
</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
Strip All HTML Tags Except Links
How to Change an Image on Click Using CSS Alone
CSS Filter:Invert Not Working with Background-Color
When I Try to Shift the Image Upwards Using Negative Margin the Whole Container Is Moved Upwards
How to Move Placeholder to Top on Focus and While Typing
Is It a Bug? Margins of P Element Go Outside the Containig Div
Make Flex Item Wrap to the Next Row with Following Items Continuing the Flow
How to Ellipse a Clipping Mask on the Bottom Only
Placing a <Div> Within a <Canvas>
Drawing Multiple Edges Between Two Nodes with D3
How Remove Border Around Image in CSS
How to Implement Curve Background in CSS
How to Add a Margin Between Bootstrap Columns Without Wrapping