Decrease Space between Columns in Bootstrap-CodePudding

I have checked around other questions but I cant able to decrease the space between different columns of bootstrap in single row. I want my 4 divs that are in one row using Bootstrap classes but the space between these 4 divs is large which I don't want. Whereas I also used container it decreased the space a little but still there's way too much. Spaces

body{
            padding: 0;
            margin: 0;
            background-image: url('Main backgrounds/cool-background\ \(1\).png');
            background-size: cover;
            height: 100%;
            font-family: 'Montserrat';
            overflow-x: hidden;
        }
        .heading{
            color: white;
            text-align: center;
            padding-top: 15px;
        }
        .boxesText{
            color: white;
        }
        .b1{
            width: 80px;
            height: 80px;
            background-color: aqua;
            border-radius: 4px;
            margin: 0 auto;
            position: relative;
            
        }
        i{
            font-size: 45px;
            text-align: center;
            position: absolute;
            /*TO MIDDLE AN ELEMENT IN DIV FROM ALL SIDES*/
            top: 50%;
            left: 50%;
            /* margin: -25px 0 0 -25px; */
            transform: translate(-50%, -50%);
            -webkit-filter: drop-shadow(5px 5px 5px #222);
            filter: drop-shadow(-5px 10px 7px #222);
        }
        .spacer{
            height: 6px;
        }
        .notification .badge {
            position: absolute;
            top: -10px;
            right: -10px;
            padding: 5px 10px;
            border-radius: 50%;
            background-color: red;
            color: white;
        }

<div >
    <div >
        <div >
            <div >
                <i  style="margin-top: -4px; margin-left: 2px;"></i>
            </div>
            <div ></div>
            <span>Discuss</span>
        </div>
        <div >
            <div >
                <i ></i>
            </div>
            <div ></div>
            <span>Booking</span>
        </div>
        <div >
            <div >
                <i  style="margin-left: 4px;"></i>
            </div>
            <div ></div>
            <span>Invoice</span>
        </div>
        <div >
            <div >
                <i ></i>
            </div>
            <div ></div>
            <span>Settings</span>
        </div>
</div>

CodePudding user response：

No additional CSS is required but it is possible that you already added CSS and that makes it very easy to confuse Bootstrap.

what might work best is to add a gutters to the parent div of all the columns which have an icon in them.

<div >

Above, I added g-1. That is gutter size 1. You can use up to g-5 and even g-0 for no gutters.

If it turns out that actually you only wanted left and right guttering or you only wanted vertical guttering then try these instead.

gx-*  Horizontal gutter only
gy-*  Vertical gutter only

Worth noting, you would still have to fill up the columns as much as possible. Right now your icons are the only content, these will stay the same size no matter how you shape the columns and gutters.

Worth also noting, there seems to a missing closing </div> in your example above.

Here is an alternative answer....

Put it all inside 1 column and then use justify-content-evenly. This requires d-flex on that 1 column.

If this suggestion doesn't quite work try justify-content-between instead.

Please note that every instance of b1, spacer and span are now housed together in a containing div.

<div >
    <div >
        <div >

         <div>
            <div >
                <i  style="margin-top: -4px; margin-left: 2px;"></i>
            </div>
            <div ></div>
            <span>Discuss</span>
         </div>

         <div>
            <div >
                <i ></i>
            </div>
            <div ></div>
            <span>Booking</span>
          </div>

          <div>
            <div >
                <i  style="margin-left: 4px;"></i>
            </div>
            <div ></div>
            <span>Invoice</span>
          </div>

         <div>
            <div >
                <i ></i>
            </div>
            <div ></div>
            <span>Settings</span>
          </div>

        </div>
    </div>
</div>

CodePudding user response：

I changed the code, check it, I believe this is the result you are looking for.

body{
 padding: 0;
 margin: 0;
 background-image: url('Main backgrounds/cool-background\ \(1\).png');
 background-size: cover;
 height: 100%;
 font-family: 'Montserrat';
 overflow-x: hidden;
 background: #7bc8f8;
        }

.row.text-center.boxesText {
  display: flex;
  justify-content: center;
}

.boxesText {
  color: white;
  text-align: center;
}

.col-sm-12.col-md-6.col-lg-3 {
    display: block;
    padding: 0px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
}
        
.b1 {
  font-size: 30px;
  border-radius: 5px;
  text-align: center;
  background: aqua;
  margin-bottom: 4px;
}
 
.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}
        
.heading {
  color: white;
  text-align: center;
  padding-top: 15px;
}

.fa {
    display: block;
    padding: 20px;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div >

    <div >
        <div >
            <div >
                <i ></i>
            </div>
            <span>Discuss</span>
        </div>
        
        <div >
            <div >
                <i ></i>
            </div>
            <div ></div>
            <span>Booking</span>
        </div>
        
        <div >
            <div >
                <i ></i>
            </div>
            <span>Invoice</span>
        </div>
        
        <div >
            <div >
                <i ></i>
            </div>
            <span>Settings</span>
        </div>
</div>