angular bootstrap-4 jhipster responsive bootswatch

Bootstrap angular responsivity issue in button group

I m new to front end developement and I desire to be full stack, I m using Jhipster, angular and bootstrap for self study purpose.

I successfully installed a bootswatch theme (pulse), after some work I tried to create a card list to present some data.

unfortunatly my work is lacking in responsivity as seen in the picture below in tablet mode

As you see there is a lot to do and I don't have an idea what should I do to fix it all

So I m asking about only how to fix the buttons issue in my cards for a start, maybe this will lead me to understand and get a grasp to what to do alone to other issues (menu and filters)

below I m providing all code that I think implied on this :

The main app template

<jhi-page-ribbon></jhi-page-ribbon>
<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <div class="container-fluid mt-4">
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
    </div>
    <jhi-footer></jhi-footer>
</div>

The cards code snippet in my candidat template

1 global template : all code

<div>
    <h2 id="page-heading">
        <span jhiTranslate="autoEcoleV01App.candidat.home.title">Candidats</span>
        <button id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-candidat"
            [routerLink]="['/candidat/new']">
            <fa-icon [icon]="'plus'"></fa-icon>
            <span jhiTranslate="autoEcoleV01App.candidat.home.createLabel">
                Create new Candidat
            </span>
        </button>
    </h2>
    <jhi-alert></jhi-alert>
    <br />
    <div jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
        <div class="row mb-4 ml-1">
            <input type="search" class="form-control col-sm-8 " autocomplete="off" placeholder="{{'autoEcoleV01App.constants.search' | translate}}"
                [(ngModel)]="searchValue" />
            <div class="btn-group col-sm-4">
                <button class="btn btn-sm float-left btn-outline-secondary col" jhiSortBy="nom">
                    <span jhiTranslate="autoEcoleV01App.candidat.nom">Nom</span>
                    <fa-icon [icon]="'sort'"></fa-icon>
                </button>
                <button class="btn btn-sm float-left btn-outline-secondary col" jhiSortBy="prenom">
                    <span jhiTranslate="autoEcoleV01App.candidat.prenom">Prenom</span>
                    <fa-icon [icon]="'sort'"></fa-icon>
                </button>
                <button class="btn btn-sm float-left btn-outline-secondary col" jhiSortBy="nid">
                    <span jhiTranslate="autoEcoleV01App.candidat.nid">Nid</span>
                    <fa-icon [icon]="'sort'"></fa-icon>
                </button>
            </div>
        </div>
        <div class="row">
            <div *ngFor="let candidat of (candidats | filterBy: ['nom','prenom','mere','pere','telephone','nid']: searchValue) ;trackBy: trackId"
                class="col-sm-3 mb-4">
                <div class="card card-focusable" style="min-height: 100%;">
                    <a *ngIf="candidat.photo" (click)="openFile(candidat.photoContentType, candidat.photo)">
                        <img [src]="'data:' + candidat.photoContentType + ';base64,' + candidat.photo"
                            style="max-height: 360px;  max-width: 100%;"
                            class="card-img-top " alt="candidat image" />
                    </a>
                    <div class="card-body ">
                        <h4 class="card-title">{{candidat.nom}} {{candidat.prenom}}</h4>
                        <p class="card-text ml-1">
                            <span jhiTranslate="autoEcoleV01App.candidat.dateInscription">Date Inscription  </span>: {{candidat.dateInscription | date:'mediumDate'}}
                            <br >
                            <span jhiTranslate="autoEcoleV01App.candidat.telephone">Téléphone  </span>: {{candidat.telephone}}
                         </p>
                        <div class="text-right">
                            <div class="btn-group flex-btn-group-container">
                                <button type="submit" [routerLink]="['/candidat', candidat.id, 'view' ]"
                                    class="btn btn-info btn-sm">
                                    <fa-icon [icon]="'eye'"></fa-icon>
                                    <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
                                </button>
                                <button type="submit" [routerLink]="['/candidat', candidat.id, 'edit']"
                                    class="btn btn-primary btn-sm">
                                    <fa-icon [icon]="'pencil-alt'"></fa-icon>
                                    <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
                                </button>
                                <button type="submit"
                                    [routerLink]="['/', 'candidat', { outlets: { popup: candidat.id + '/delete'} }]"
                                    replaceUrl="true" queryParamsHandling="merge" class="btn btn-danger btn-sm">
                                    <fa-icon [icon]="'times'"></fa-icon>
                                    <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
 </div>

2 Only card code for easy reading

<div class="card-body ">
   <h4 class="card-title">{{candidat.nom}} {{candidat.prenom}}</h4>
   <p class="card-text ml-1">
      <span jhiTranslate="autoEcoleV01App.candidat.dateInscription">Date Inscription  </span>: {{candidat.dateInscription | date:'mediumDate'}}
      <br >
      <span jhiTranslate="autoEcoleV01App.candidat.telephone">Téléphone  </span>: {{candidat.telephone}}
   </p>
   <div class="text-right">
      <div class="btn-group flex-btn-group-container">
         <button type="submit" [routerLink]="['/candidat', candidat.id, 'view' ]"
            class="btn btn-info btn-sm">
            <fa-icon [icon]="'eye'"></fa-icon>
            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
         </button>
         <button type="submit" [routerLink]="['/candidat', candidat.id, 'edit']"
            class="btn btn-primary btn-sm">
            <fa-icon [icon]="'pencil-alt'"></fa-icon>
            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
         </button>
         <button type="submit"
            [routerLink]="['/', 'candidat', { outlets: { popup: candidat.id + '/delete'} }]"
            replaceUrl="true" queryParamsHandling="merge" class="btn btn-danger btn-sm">
            <fa-icon [icon]="'times'"></fa-icon>
            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
         </button>
      </div>
   </div>
</div>

Solution

Thanks to JB Nizet comment I was made in the stright path so I searched for a way to be sure that there is enought space, my answer was Breakpoints

Here is what I have done :

I used angular material and this tutorial was helpfull
setup a goal : I have to change cards number depending on screen size

Here is my implementation of the solution

Importing the module in my global app module app.module.ts to be used in all components

import { LayoutModule } from '@angular/cdk/layout';
@NgModule({
    imports: [...
              LayoutModule,
              ...])

using the BreakpointService in my candidat.component.ts

import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';

@Component({
    selector: 'jhi-candidat',
    templateUrl: './candidat.component.html'
})
export class CandidatComponent implements OnInit, OnDestroy {
  someVars: any;
  small: any;
  medium: any;
  large: any;

  constructor(
    protected someServices: MyServices,
    public breakpointObserver: BreakpointObserver
  ){}

  ngOnInit() {
    this.someLogic();
    this.breakpointObserver
            .observe(['(max-width: 425px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    this.small = true;
                    this.medium = false;
                    this.large = false;
                }
                console.log('Small screen event');
            });
    this.breakpointObserver
            .observe(['(max-width: 1025px)', '(min-width: 426px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    this.small = false;
                    this.medium = true;
                    this.large = false;
                }
                console.log('Medium screen event');
            });
    this.breakpointObserver
            .observe(['(min-width: 1025px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    this.small = false;
                    this.medium = false;
                    this.large = true;
                }
                console.log('Large screen event');
            });
    }

    cardsStyleClasses() {
        return {
            'mb-4': true,
            'col-sm-1': this.small,
            'col-sm-4': this.medium,
            'col-sm-3': this.large
        };
    }
}

finally using ngClass in my templte

[ngClass]="cardsStyleClasses()"