Grid class system is not working for Nebular Theme v4.0.0

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request
• question about the decisions made in the repository

Issue description

Current behavior: I have placed the .row and .show-grid class on two cards in my content layout. However, the

Expected behavior: I expect for the two cards to be laid side-by-side on screens size tablet and larger. And only stack when the screen goes smaller (<768px).

Steps to reproduce: You can see the problem in the StackBlitz sample shown below. The BaristaMachineComponent template has a container with the Grid classes but nothing is happening.

Related code: https://stackblitz.com/github/guillermoarellano/ngx-baristamatic-demo/tree/324a61dab67ea04a5a2d48b9be3a4a2faf33fc69?file=src%2Fapp%2Fbarista-machine%2Fbarista-machine.component.html

<div class="row show-grid">
  <div class="col-md-6">
    <nb-card [size]="'medium'">
      <nb-card-header>Drinks Menu</nb-card-header>
      <nb-card-body>
        <div *ngFor="let drink of menuDrinks">
          <button nbButton
                  (click)="handleMakeDrink(drink.name)"
                  [disabled]="!drink.inStock">{{drink.name}}, {{drink.cost}}</button>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card [size]="'medium'">
      <nb-card-header>Inventory</nb-card-header>
      <nb-list>
        <nb-list-item *ngFor="let item of inventory">
          {{item.ingredient}} - {{item.quantity}}
        </nb-list-item>
      </nb-list>
    </nb-card>
    <button nbButton status="warning" (click)="handleRestockInventory()">Restock inventory</button>
  </div>
</div>

Other information:

npm, node, OS, Browser

<!--
Node, npm: v10.13.0 and 6.9.0
OS: Windows 10. 
Browser: Firefox Quantum 67.0.1 (64-bit), Chrome 74.0.3729.169 (Official Build) (64-bit)
-->

Angular, Nebular

    "@angular/animations": "~8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@nebular/eva-icons": "4.0.0",
    "@nebular/theme": "^4.0.0",
    "eva-icons": "^1.1.1",

[guillermoarellano]

Resolved:

The solution was to import both @nebular/bootstrap and regular bootstrap into the project. And then modify the src/styles.scss pull in the Bootstrap mixins and grids.

1. npm install bootstrap @nebular/bootstrap
2. Modify styles.scss
   • See this file – https://stackblitz.com/github/guillermoarellano/ngx-baristamatic-demo/tree/08b58bd347680fa07ec52d6cfc0c321f0ae4b9aa?file=src%2Fstyles.scss

Thanks to @LeonardHorng for the tip. 👍

[guillermoarellano]

Anybody know how to submit updates/enhancements to the documentation?