Bootstrap empty space in a column - html

Question

Please see the attachment for more detailed comprehension
I'm using Bootstrap in my current project. As you can see from the picture, there's a blank space that comes in a first column right after the content. Though if I just use columns without any styling, clearly the desired space isn't going to take place. What is the best solution for this problem? I was thinking of wrapping the content in a div with min-height rule but obviously it's a clumsy option.
Thank you.

Answer 1

That is your grid gutter. You can change the width of it with a custom build or by using the source code and changing the scss variable $grid-gutter-width.

Answer 2

As said, the problem is with the gutters.
I use this classes to avoid gutter when I don't want them:
css:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^='col-'],
.row.no-gutters > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
sass:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
> [class^='col-'], > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}