Bootstrap add space in between cols without breaking row

Question

I am trying to add space in between these buttons without changing the row size. When I add space in the margin it breaks the row. How can I do this?

DEMO: https://codepen.io/PapaDeBeau/pen/XVvmmj

<div class="container">
    <div class="row">
      <div class="col-4 giveButton"><span>$</span>25</div>  
      <div class="col-4 giveButton"><span>$</span>50</div>  
      <div class="col-4 giveButton"><span>$</span>100</div>
    </div>

    <div class="row">
      <div class="col-4 giveButton"><span>$</span>250</div>  
      <div class="col-4 giveButton"><span>$</span>500</div>  
      <div class="col-4 giveButton"><span>$</span>1,000</div>
    </div>

    <div class="row">
      <div class="col-12 giveButton"><span>$</span>5,000</div>  
      <div class="col-12 giveButton"><span>$</span>10,000</div>  
    </div>
</div>

Possible duplicate of [How do I add a margin between bootstrap columns without wrapping](https://stackoverflow.com/questions/19010845/how-do-i-add-a-margin-between-bootstrap-columns-without-wrapping) — cowbert, Jan 26 '18 at 05:08
Put the button inside the col instead of using the col as the button — Steve K, Jan 26 '18 at 05:10

WebDevBooster · Accepted Answer · 2018-01-26T08:57:30.057

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>

score 0 · Answer 2 · edited Feb 28 '19 at 14:11

0

Probably don't make your col into a button but place buttons inside the col.

<div class="col-4">
    <button class="giveButton btn btn-block"><span>$</span>25</button>
</div>

You'd have to adjust giveButton class a little bit too.

edited Feb 28 '19 at 14:11

brooksrelyt

3,925
5
31
54

answered Jan 26 '18 at 05:18

Sonya

76
1
8

score 0 · Answer 3 · answered Jan 26 '18 at 07:54

0

I'm adding a new div with .col-12 inside of each column and it works good for me:

<div class="col-4">
    <div class="col-12 giveButton">
        <span>$</span>50
    </div>
</div>

Here is a working example: https://codepen.io/xristoeftimov/pen/EoqKbj

answered Jan 26 '18 at 07:54

Hristo Eftimov

13,845
13
50
77

Bootstrap add space in between cols without breaking row

3 Answers3