title: Bootstrap grid col width if empty
body: <p>I am facing an issue atm with the grid system. While I try to do some kanban style d&amp;d system.</p>
  
  <p>The issue is shown in the pic below.
  Every card should be in a place as the arrows suggest.
  Since the 2nd column is "empty" -> no cards in it yet, it's only have the padding applied to it.
  <a href="https://i.stack.imgur.com/sVdFA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sVdFA.png" alt="Issue"></a></p>
  
  <p>Previously it was working well since everything was in the same col, and since the header(color indicated card) was in said col it'd have the correct width.</p>
  
  <p>However I needed to separate the header since I'd like to implement some sticky behavior -> header should stay on top when we use vertical scroll.</p>
  
  <p>The template looks like:</p>
  
  <pre><code>&lt;div #autoscroll
       class="col wholeTable"&gt;
    &lt;div class="row pipe-header"&gt;
      &lt;ng-container *ngFor="let stage of cardList; let i = index"&gt;
        &lt;div class="col"&gt;
          &lt;ng-container *ngIf="pipelineConfig.headerTemplate; else noHeaderForYou"&gt;
            &lt;ng-container
                          *ngTemplateOutlet="pipelineConfig.headerTemplate; context : {$implicit: headerList[i], count: cardList[i].items.length}"&gt;
            &lt;/ng-container&gt;
          &lt;/ng-container&gt;
          &lt;ng-template #noHeaderForYou&gt;
            &lt;!-- Displaying some useful info even if no custom template is present--&gt;
            &lt;dt-pipeline-header [label]="headerList[i].elementLabel"
                                       [count]="cardList[i].items.length"&gt;
            &lt;/dt-pipeline-header&gt;
          &lt;/ng-template&gt;
        &lt;/div&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  
    &lt;div class="row stage"&gt;
      &lt;ng-container *ngFor="let stage of cardList"&gt;
        &lt;div class="col"
             dragula="cardList"
             [(dragulaModel)]="stage.items"
             attr.id="{{stage.key}}"&gt;
          &lt;ng-container *ngFor="let item of stage.items"&gt;
            &lt;div class="card"
                 [ngClass]="{
                      'dragabble' : pipelineConfig.permissionChecker(item),
                      'nodrag': !pipelineConfig.permissionChecker(item)
                    }"&gt;
              &lt;div class="card-body"&gt;
                &lt;ng-container *ngIf="!pipelineConfig.permissionChecker(item)"&gt;
                  &lt;span class="disabled-indicator"&gt;&lt;i class="fas fa-ban"&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;/ng-container&gt;
                &lt;ng-container
                              *ngTemplateOutlet="pipelineConfig.bodyTemplate; context: {$implicit: item, showColumns: showContent}"&gt;
                &lt;/ng-container&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/ng-container&gt;
  
        &lt;/div&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.css:</p>
  
  <pre><code>@media only screen and (max-width: 600px) {
    .wholeTable {
      display: block;
    }
  }
  
  .stage {
    word-break: break-word;
    min-height: 100%;
    flex-wrap: nowrap;
  
    .col {
      min-width: min-content;
    }
  }
  
  .card.dragabble:hover {
    cursor: grab;
  }
  
  .card.dragabble, .card.nodrag {
    margin: 1rem 0rem;
  }
  
  .pipe-head-divider {
    margin-bottom: 0;
  }
  
  .disabled-indicator{
    display: flex;
    float: right;
    position: relative;
    top: -0.5rem;
    right: -0.5rem;
  }
  
  .wholeTable {
    overflow-x: scroll;
    overflow-y: hidden;
    flex-wrap: nowrap;
  }
  
  .pipe-header {
    flex-wrap: nowrap;
  }
  </code></pre>