bootstrap 4 Grid, laying 4 elements in a row with a custom horizontal gutter

Question

I am trying to lay 4 elements in a row with a custom horizontal gutter, I tried to put each element in a col with the class of col-md-2 for a certain screen size, and modify the margin-right of each element to my need.. but it didn't look very good, when applying the col-md-3 obviously there is no room for adding a margin to each element, surprisingly when I tried applying col-md-2.5 class, it worked on big screens, however, when I want to have the element span to 10 cols in the smaller screens, it does, but when i go back to the bigger screen, it behaves like the small screen again, Here is my HTML code and i will leave a screenshot down below to illustrate the behavior that I want.

[class^="col"]:not(:last-child){
    margin-right: 60px;
  }

<div class="container">
    <div class="row">
        <div class="col col-md-2.5">1</div>
        <div class="col col-md-2.5">2</div>
        <div class="col col-md-2.5">3</div>
        <div class="col col-md-2.5">4</div>
    </div>
</div>

<!--I know it may look weird but this above HTML along with the CSS 
achieved my goal on the big screens -->

<!-- things get messy again when i do the following to adjust the 
view of elements on smaller screens -->

<div class="container">
    <div class="row">
        <div class="col-10 offset-1 col-md-2.5">1</div>
        <div class="col-10 offset-1 col-md-2.5">2</div>
        <div class="col-10 offset-1 col-md-2.5">3</div>
        <div class="col-10 offset-1 col-md-2.5">4</div>
    </div>
</div>

<!-- it works fine in small screen, but when I back to big 
screens with this set up, it doesn't give me the initial 
behavior and spans every element to columns !!

Here is the screenshot of the desired behavior

thanks in advance!

score 1 · Answer 1 · answered Oct 02 '18 at 23:48

I don't quite get your problem. Have you just tried simply applying paddings to the left and right of your 4 columns using {property}{sides}-{breakpoint}-{size} notation?

https://getbootstrap.com/docs/4.1/utilities/spacing/#notation

That way you don't have to use offset on your columns. Instead, you can just use col.

For example, if you only want big left and right paddings on large scrren, you can apply px-lg-5 on col class.

<div class="container">
    <div class="row">
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
        <div class="col px-lg-5">
            ...
        </div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/aq9Laaew/241204/

HyperTextCoffeePot · Answer 2 · 2018-10-02T22:15:07.373

You're missing your target screen:

<div class="container">
    <div class="row">
        <div class="col-10 offset-1 col-md-2.5">1</div>
        <div class="col-10 offset-1 col-md-2.5">2</div>
        <div class="col-10 offset-1 col-md-2.5">3</div>
        <div class="col-10 offset-1 col-md-2.5">4</div>
    </div>
</div>

Add whichever size you want: xs, sm, md, lg to the col and the offset like this:

<div class="container">
    <div class="row">
        <div class="col-10 col-sm-offset-1 col-md-2.5">1</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">2</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">3</div>
        <div class="col-10 col-sm-offset-1 col-md-2.5">4</div>
    </div>
</div>

Here's a reference: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

EDIT: It looks like you may have to specify which screen you're targeting when using the offset class. But, you're correct about not needing the other option.

thanks for your response, but like I mentioned in the title, this is bootstrap 4, and it automatically considers the `col` as a `col-xs` in bootstrap 3. so this still didn't solve my issue, but thanks anyway — Swilam Muhammad, Oct 02 '18 at 22:08
Pays attention to details...Leaves room for improvement. Haha thanks for being so nice about it. Now you've piqued my curiosity on the matter. — HyperTextCoffeePot, Oct 02 '18 at 22:10

bootstrap 4 Grid, laying 4 elements in a row with a custom horizontal gutter

2 Answers2