How to change the offset size in bootstrap 4 grids?

Question

I'm using bootstrap 4 in my Angular 8 application. In my main page I have two components of size md-5 and md-6 and I want to separate them using offset-md-1. But the offset size is big and I don't want to have that much space between my components. How do I reduce the size of the offset? Will offset-md-0.5 work? Can you suggest any better way other than using bootstrap offset? This is my code:

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

Bootstrap has 12 columns by standard, if one column offset is too big, you might want to change the amount of columns to 24. AFAIK with Bootstrap LESS/SASS you can simply change the parameter in the mixin call and et`voila. — AlexG, Feb 13 '20 at 09:02

KuldipKoradia · Answer 1 · 2020-02-13T06:36:33.150

Use ml-auto instead of offset-md-1 it works perfect for you.

try this code:

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

I hope this will works perfect for you.

Note: I Can't understand that how offset-md-1 size is big? the default css property for this class is fixed margin-left: 8.333333%; in bootstrap. you can use this class also but condition is that you do not have to make any kind of changes in col-**-* width.

Thank you...

mahan · Answer 2 · 2020-02-13T09:02:26.957

There is no *-xs-* classes in bootstrap-4. Use col-12 instead. `col-xs-*` not working in Bootstrap 4

Ther are three ways to add space between columns.

margin-x on .col-*
padding-x on .col-*
justify-content-between on .row

Margin is quite tricky since it affects the sum of width of total columns. The width + margin-x of the two columns should not exceed the width of .row. Otherwise, the columns breaks.

The total width of the two columns on md-screen is 91.667%. So you have 8.333% free sapce. You can control where to use this 8.333%.

offset-md-1,mr-auto, ml-auto and justify-content-between yeilds the same result: 8.333% space betwen the two columns.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6  bg-primary">
        
    </div>
    <div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
        offset-md-1
    </div>
  </div>
</div>


<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 mr-auto bg-primary">
        mr-auto
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
        
    </div>
  </div>
</div>

<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 bg-primary">
        
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
        ml-auto
    </div>
  </div>
</div>



<div class="container-fluid mt-5">
  <div class="row justify-content-between">
    <div class="container1 col-12 col-md-6 bg-primary">
        justify-content-between
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ">
    justify-content-between
    </div>
  </div>
</div>

If you want to have 8.333% / 2 space betwen them. You can not do it in bootstrap-4. So you need to use css.

@media (min-width: 768px) {
  .ml-md-0_5 {
    margin-left: calc((100% / 12) / 2)
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
  <div class="row">
    <div class="container1 col-12 col-md-6 bg-primary">
      
    </div>
    <div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
      ml-md-0_5
    </div>
  </div>
</div>

Now, the total width + margin of both of the columns is 95.833%. By default, the elements are left aligned. Therefore, 4.166% free sapce on the right side of the last column. You can use it on x-side of any of the columns if you wish so.

As said before, you can use padding-x also which i prefer because it does not affect the total width of the columns.

How to change the offset size in bootstrap 4 grids?

2 Answers2