column header and row not aligning using bootstrap

Question

I am trying to use bootstrap styles to display a grid style. For some reason my column header and body aren't aligning. Could somebody tell me what the problem could be. I have also tried applying styling. I need to basically show Header for the first div which has class class="col-md-12. I then need to style the body div which has class div class="row your-body" . At the moment your-body us just dummy has no style defined. Need help.

<div class="grid-container container-fluid">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-1">
        CompanyName
      </div>
      <div class="col-md-1">
        ContactName
      </div>
      <div class="col-md-1">
        ContactTitle
      </div>
      <div class="col-md-1">
        Address
      </div>
      <div class="col-md-1">
        City
      </div>
      <div class="col-md-1">
        Region
      </div>
      <div class="col-md-1">
        PostalCode
      </div>
      <div class="col-md-1">
        Country
      </div>
      <div class="col-md-1">
        Phone
      </div>
      <div class="col-md-1">
        Fax
      </div>

    </div>
  </div>
  <div class="row your-body">
    <div class="col-md-12">
      <ng-template let-customer let-customerIdx="index" ngFor [ngForOf]="customers">
        <div class="col-md-1">
          <span>{{customer.CompanyName}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.ContactName}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.ContactTitle}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Address}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.City}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Region}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.PostalCode}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Country}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Phone}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Fax}}</span>
        </div>
      </ng-template>
    </div>
  </div>
</div>

style.scss

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
  }

Expection the UI to look

If you can turn this into a running example it would be a lot easier to debug, guess is your organization of the col and row are a bit out of wack, typically you have container > row > col, and if you need nested then in the col you have again container > row > col, also curious if you are able to move to bootstrap 4 or if this is a bigger project already using bootstrap 3 throughout, if using 4 is an option it might be worth solving there instead — shaunhusain
bootstrap 4 is fine. I just have to display it as a table with header and details below — Tom
Do you have a drawing of the layout you're trying to accomplish or can you describe in some more detail what's wrong? — shaunhusain

shaunhusain shaunhusain · Accepted Answer · 2019-01-25T02:24:47

This is a more 'valid' version of the layout code using bootstraps grid system:

<div class="outer-container container-fluid">
  <div class="col-md-12">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-1">
          CompanyName
        </div>
        <div class="col-md-1">
          ContactName
        </div>
        <div class="col-md-1">
          ContactTitle
        </div>
        <div class="col-md-1">
          Address
        </div>
        <div class="col-md-1">
          City
        </div>
        <div class="col-md-1">
          Region
        </div>
        <div class="col-md-1">
          PostalCode
        </div>
        <div class="col-md-1">
          Country
        </div>
        <div class="col-md-1">
          Phone
        </div>
        <div class="col-md-1">
          Fax
        </div>
    </div>

    <div class="row">
      <div class="col-md-1">
        <span>121</span>
      </div>
      <div class="col-md-1">
        <span>232</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>343</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>34343</span>
      </div>
      <div class="col-md-1">
        <span>454545</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
    </div>
  </div>
</div>

https://stackblitz.com/edit/angular-cupnh1?file=src%2Fapp%2Fapp.component.html

^^ for running example with a little nicer online editor IMO

column header and row not aligning using bootstrap

1 Answers