Category: bootstrap4

Carousel View – Bootstrap 4 and Angular 6

You would need something like this for working with Carousel view file.component.html <div class=”carousel slide “data-ride=”carousel”>   <ngb-carousel>     <ng-template ngbSlide>        <div class=”carousel-caption”>           <h3>First slide label</h3>           <p>Text 1.</p>        </div>        <img src=”/assets/images/img1.png”/>      </ng-template>   …

Input – Bootstrap 4 & Angular 6

1.Input with place holder and search icon , as follow: <div class=”input-group search-input”>    <input type=”text” class=”form-control” placeholder=”Search…” [(ngModel)]=”filter” (keyup.enter)=”search()”>    <span class=”input-group-btn”>       <button class=”btn btn-default” type=”button” (click)=”search()”>          <i class=”fa fa-search”></i>       </button>    </span> </div>

Div – Bootstrap4 and Angular6

Button – Bootstrap 4 && Angular 6

This blog is a collection for some trick while using Bootstrap and Angular 6 1- Font awesome Icon + Text inside the button:  <a class=”btn btn-primary” [routerLink]=”[‘#’]”><i class=”fa fa-plus”></i>&nbsp;&nbsp;New profile</a>  

How to – collapse for Bootstrap 4 and Angular 6

In order to make a navbar collapse in boostrap 4 to be used with Angular 6, following things need to be done: file.html <nav class=”navbar” role=”navigation”>  <a class=”navbar-brand” href=”#” title=”GreenTSharing” target=”_blank”><img class=”logo”  src=”/assets/images/logo.png” id=”logo” /></a>   <button type=”button” class=”navbar-toggler” data-toggle=”collapse”  (click)=”isNavCollapsed = !isNavCollapsed” [attr.aria-expanded]=”!isNavCollapsed” aria-controls=”bs-example-navbar-collapse-1″ aria-label=”Toggle navigation”>     <span class=”navbar-toggler-icon”></span>   </button>   <div …