Differencebetween Push and Offset Under the Grid System

What is the difference between push and offset under the grid system?

Since offset uses margin-left, and push uses left:

offset will force neighboring columns to move
push (and pull) will overlap other columns

Here's a visual example: http://www.bootply.com/126557

In your example there are no column 'collisions'. Push and offset appear the same since the neighbouring columns aren't impacted.

Bootstrap PUSH vs PULL vs OFFSET?

In offseting--Move columns to the right using .col-md-offset-* classes.
And through pull and push, Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Role of push/pull and offset in Bootstrap grid system

Here is my understanding about Bootstrap 3 grid system:

All column dimensions are calculated using the border-box model. So, when we change the value of border-width and padding properties, the real width column is not changed.
The width of the column is set by the .col-xx-n class.It is set to n/12 of the width of the parent container (the .row element)
The position of the column is set via two methods:
- The .col-xx-offset-n class moves the column to the right by a value of n/12 of the width of the container. This is done by applying a value of n * 100% / 12 to the left-margin property to the column.
- The .col-xx-push/pull-n class moves the column to the left/right by a value of n/12 of the width of the container. This is done by applying a value of n * 100% / 12 to the left/right property to the column.

For example, let see your article element in large screen. We divide the current .row element to 12 columns, called column 1 - column 12.

Its width is set to 8/12 of the width of the .row element. Its position now is from 1st column to 8th column.
It is pushed towards the right 1 column by the .col-lg-offset-1 class. Now, Its position now is from 2nd column to 9th column (its left margin fills the 1st column).
When the .col-lg-push-3 class is applied to the column, the column itself is now moved to the left 3 columns. Its position now is from 4th column to 11th column.
Remember the .col-lg-offset-1 class and it left margin? The left margin fills the 4th column now. Finally, the column position now is from the 5th column to the 12th column.

Hope this help.

What exactly is offset in bootstrap?

Offsets are used for spacing elements in the responsive grid.

The unit is based on the column layout.

You can define an offset this way :
col-[breakpoint]-offset-[number of colums]

In this example, admitting our layout is made of 12 columns :

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <p>test</p>
    </div>
</div>

Means that in the medium range of the grid system, the element will have a width of 6 colums and there will be 3 blank columns before the element (and as a consequence, will have 3 blank colums after).

The result of this is a div of 6 colums width, centered in the container.

There is a example showing how it renders in the Bootstrap documentation.
https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns

What does offset mean in Bootstrap?

See the comment.

Basically it pushes the cols to the right. So in your example, col-sm-offset-2would push the element 2 columns to the right in 'md' view. So your element kinda starts at col-3.

col-sm-2 on the other hand just tells the element how wide it is. If you combine these 2 statements, you get an element that is pushed in 2 cols and is 2 cols wide.

Difference between push myVar , push [myVar] and push OFFSET myVar

push myVar is simply pushing your var on the stack.

push [myVar] is dereferencing your var. if myVar is a pointer, this code will push the value at the address on the stack.

I'm not sure for the last one, but it seems it does the inverse, push OFFSET myVar is pushing the address of myVar on the stack.

How to offset div columns in CSS grid system

Well, for the offset, you need to apply a left margin to floated columns to push them to the right side.

The value of the margin-left is equal to:

for the first column which doesn't have a left margin itself: the width of previous columns + the gutter width.
for the second column (the other columns):
- ^{If the column has a left/right margin (which creates the gutter):}
  
  The width of previous columns + the gutter width + 1/2 gutter width. (As the columns have a left/right margin of 1/2 of the gutter width)
- ^{If the column doesn't have margin-left (i.e. the gutter is created only by margin-right):}
  
  The width of previous columns + the gutter width.

For instance:

for the first column we calculate the left margin for .offest-6 as follows:

.row [class*="col-"]:first-child.offest-6-12 {
    margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px);
    /*                |          width of col-6-12         | + gutter width */
}

WORKING DEMO.

_{Note: I used multiple selectors here in order to have a higher specificity value.}

Also note that as the columns are floated next to each other, you only need to use the .offset-* class for the first column to push them both to the right side.

And for the second column (The other columns) which has left (and right) margin(s):

Since the column has a left (and right) margin (equals 1/2 of the gutter = 10px)

.row [class*="col-"].offest-6-12 {
    margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px + 10px);
    /*                |          width of col-6-12         | + (1   + 1/2) gutter width */
}

UPDATED DEMO. (The Sassy way: Sass version)

Note

For the second column, you should use offset-6 because there is another col-3 column before the current column.

I.e. You should count the columns' numbers including the offsets.

For instance: col-3 + col-3 including offset-6 = 12 columns. If you add more columns, it'll break the flow as it exceeds the limit of 12 columns in a row.

How can we change the code in my CSS to compensate for that 30px on
the end of the calc() function, can there be something in the CSS that's
in there to make it work without the 30px. so it can calculate by the
20px gutter instead of that 30px

Now the columns have a left and right margin of 10px which creates the 20px gutter. That's the reason of adding an extra 10px to the gutter width for offsets.

We could use margin-right: 20px for the columns instead of two margin for left and right side (and no margin for the last column). In this case, we wouldn't need to add the extra 10px.