<div class="row"> <div class="col-lg-12 col-xlg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">General Buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-success</code> to quickly create a General btn.</h6> <div class="button-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> </div> </div> </div> </div> <div class="col-lg-12 col-xlg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Button with outline</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-outline-success</code> to quickly create a General btn.</h6> <div class="button-group"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> </div> </div> </div> </div> <div class="col-lg-12 col-xlg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Rounded Buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-rounded btn-success</code> to quickly create a General btn.</h6> <div class="button-group"> <button type="button" class="btn btn-rounded btn-primary">Primary</button> <button type="button" class="btn btn-rounded btn-secondary">Secondary</button> <button type="button" class="btn btn-rounded btn-success">Success</button> <button type="button" class="btn btn-rounded btn-info">Info</button> <button type="button" class="btn btn-rounded btn-warning">Warning</button> <button type="button" class="btn btn-rounded btn-danger">Danger</button> </div> </div> </div> </div> <div class="col-lg-12 col-xlg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Rounded outlined Buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-rounded btn-outline-success</code> to quickly create a General btn.</h6> <div class="button-group"> <button type="button" class="btn btn-rounded btn-outline-primary">Primary</button> <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-rounded btn-outline-success">Success</button> <button type="button" class="btn btn-rounded btn-outline-info">Info</button> <button type="button" class="btn btn-rounded btn-outline-warning">Warning</button> <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button> </div> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Button Sizes</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-lg btn-success</code> to quickly create a General btn.</h6> <div class="button-group"> <button type="button" class="btn btn-lg btn-primary">Large .btn-lg </button> <button type="button" class="btn btn-secondary">Normal .btn</button> <button type="button" class="btn btn-sm btn-success">Small .btn-sm</button> <button type="button" class="btn btn-xs btn-info">Tiny .btn-xs</button> </div> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Button Sizes with rounded</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-lg btn-rounded btn-success</code> to create a btn.</h6> <div class="button-group"> <button type="button" class="btn btn-lg btn-rounded btn-primary">Large .btn-lg </button> <button type="button" class="btn btn-rounded btn-secondary">Normal .btn</button> <button type="button" class="btn btn-rounded btn-sm btn-success">Small .btn-sm</button> <button type="button" class="btn btn-rounded btn-xs btn-info">Tiny .btn-xs</button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title">Block buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-block btn-success</code> to quickly create a General btn.</h6> <div class="row button-group"> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-info">Info</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-success">Success</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-primary">Primary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-danger">Danger</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-secondary">Secondary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-warning">Warning</button> </div> </div> </div> <div class="card-body"> <h4 class="card-title">Rounded Block buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-block btn-success</code> to quickly create a General btn.</h6> <div class="row button-group"> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-info">Info</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-success">Success</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-primary">Primary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-danger">Danger</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-secondary">Secondary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-warning">Warning</button> </div> </div> </div> <div class="card-body"> <h4 class="card-title">Block outline buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-block btn-outline-success</code> to quickly create a General btn.</h6> <div class="row button-group"> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-outline-info">Info</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-outline-success">Success</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-outline-primary">Primary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-outline-danger">Danger</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-outline-secondary">Secondary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-outline-warning">Warning</button> </div> </div> </div> <div class="card-body"> <h4 class="card-title">Rounded outline Block buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-block btn-outline-success</code> to quickly create a General btn.</h6> <div class="row button-group"> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-outline-info">Info</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-outline-success">Success</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-outline-primary">Primary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-outline-danger">Danger</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-outline-secondary">Secondary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-rounded btn-block btn-outline-warning">Warning</button> </div> </div> </div> <div class="card-body"> <h4 class="card-title">Large Block buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-block btn-lg btn-success</code> to quickly create a General btn.</h6> <div class="row button-group"> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-lg btn-info">Info</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-lg btn-success">Success</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-lg btn-primary">Primary</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-lg btn-danger">Danger</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-lg btn-secondary">Second</button> </div> <div class="col-lg-2 col-md-4"> <button type="button" class="btn btn-block btn-lg btn-warning">Warning</button> </div> </div> </div> </div> </div> </div> <!-- Row --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title">Button with icon</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-success</code> & <code>i class ="fa fa-heart"</code> to quickly create a General btn.</h6> <div class="row button-group"> <div class="col-lg-12 col-xlg-6 m-b-30"> <button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Primary</button> <button type="button" class="btn btn-secondary">Secondary <i class="fa fa-heart"></i></button> <button type="button" class="btn btn-success"><i class="fa fa-check"></i> Success</button> <button type="button" class="btn btn-info"><i class="fa fa-heart"></i> Info</button> <button type="button" class="btn btn-warning"><i class="fa fa-heart"></i> Warning</button> <button type="button" class="btn btn-danger"><i class="fa fa-heart"></i> Danger</button> </div> <div class="col-lg-12 col-xlg-6 m-b-30"> <button class="btn btn-primary waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fas fa-envelope"></i></span>Mail</button> <button class="btn btn-secondary waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fa fa-check"></i></span>Check</button> <button class="btn btn-info waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fa fa-heart"></i></span>Heart</button> <button class="btn btn-warning waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fas fa-envelope"></i></span>Mail</button> <button class="btn btn-danger waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fa fa-heart"></i></span>Heart</button> </div> <div class="col-lg-12 col-xlg-6 m-b-30"> <button type="button" class="btn btn-primary btn-rounded"><i class="fa fa-check"></i> Primary</button> <button type="button" class="btn btn-secondary btn-rounded">Secondary <i class="fa fa-heart"></i></button> <button type="button" class="btn btn-success btn-rounded"><i class="fa fa-check"></i> Success</button> <button type="button" class="btn btn-info btn-rounded"><i class="fa fa-heart"></i> Info</button> <button type="button" class="btn btn-warning btn-rounded"><i class="fa fa-heart"></i> Warning</button> <button type="button" class="btn btn-danger btn-rounded"><i class="fa fa-heart"></i> Danger</button> </div> <div class="col-lg-12 col-xlg-6 m-b-30"> <button type="button" class="btn btn-outline-primary"><i class="fa fa-check"></i> Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary <i class="fa fa-heart"></i></button> <button type="button" class="btn btn-outline-success"><i class="fa fa-check"></i> Success</button> <button type="button" class="btn btn-outline-info"><i class="fa fa-heart"></i> Info</button> <button type="button" class="btn btn-outline-warning"><i class="fa fa-heart"></i> Warning</button> <button type="button" class="btn btn-outline-danger"><i class="fa fa-heart"></i> Danger</button> </div> <div class="col-lg-12 col-xlg-6 m-b-30"> <button class="btn btn-outline-primary waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fas fa-envelope"></i></span>Mail</button> <button class="btn btn-outline-secondary waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fa fa-check"></i></span>Check</button> <button class="btn btn-outline-info waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fa fa-heart"></i></span>Heart</button> <button class="btn btn-outline-warning waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fas fa-envelope"></i></span>Mail</button> <button class="btn btn-outline-danger waves-effect waves-light" type="button"><span class="btn-label m-r-5"><i class="fa fa-heart"></i></span>Heart</button> </div> <div class="col-lg-12 col-xlg-6 m-b-30"> <button type="button" class="btn btn-outline-primary btn-rounded"><i class="fa fa-check"></i> Primary</button> <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary <i class="fa fa-heart"></i></button> <button type="button" class="btn btn-outline-success btn-rounded"><i class="fa fa-check"></i> Success</button> <button type="button" class="btn btn-outline-info btn-rounded"><i class="fa fa-heart"></i> Info</button> <button type="button" class="btn btn-outline-warning btn-rounded"><i class="fa fa-heart"></i> Warning</button> <button type="button" class="btn btn-outline-danger btn-rounded"><i class="fa fa-heart"></i> Danger</button> </div> </div> </div> </div> </div> </div> <!-- End row --> <!-- Row --> <div class="row"> <div class="col-lg-6 button-group"> <div class="card"> <div class="card-body"> <h4 class="card-title">Circle buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-circle btn-success</code> to quickly create a General btn.</h6> <button type="button" class="btn btn-secondary btn-circle"><i class="fa fa-check"></i> </button> <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i> </button> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i> </button> <button type="button" class="btn btn-info btn-circle"><i class="fa fa-check"></i> </button> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-times"></i> </button> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-heart"></i> </button> <br> <br> <h4 class="card-title">Circle Large buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-circle btn-lg btn-success</code> to quickly create a General btn.</h6> <button type="button" class="btn btn-secondary btn-circle btn-lg"><i class="fa fa-check"></i> </button> <button type="button" class="btn btn-primary btn-circle btn-lg"><i class="fa fa-list"></i> </button> <button type="button" class="btn btn-success btn-circle btn-lg"><i class="fa fa-link"></i> </button> <button type="button" class="btn btn-info btn-circle btn-lg"><i class="fa fa-check"></i> </button> <button type="button" class="btn btn-warning btn-circle btn-lg"><i class="fa fa-times"></i> </button> <button type="button" class="btn btn-danger btn-circle btn-lg"><i class="fa fa-heart"></i> </button> <br> <br> <h4 class="card-title">Circle xtra Large buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-circle btn-xl btn-success</code> to quickly create a General btn.</h6> <button type="button" class="btn btn-secondary btn-circle btn-xl"><i class="fa fa-check"></i> </button> <button type="button" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-list"></i> </button> <button type="button" class="btn btn-success btn-circle btn-xl"><i class="fa fa-link"></i> </button> <button type="button" class="btn btn-info btn-circle btn-xl"><i class="fa fa-check"></i> </button> <button type="button" class="btn btn-warning btn-circle btn-xl"><i class="fa fa-times"></i> </button> </div> </div> </div> <div class="col-lg-6 button-group"> <div class="card"> <div class="card-body"> <h4 class="card-title">Social buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-facebook</code> to quickly create a General btn.</h6> <button class="btn btn-facebook waves-effect waves-light" type="button"> <i class="fab fa-facebook-f"></i> </button> <button class="btn btn-twitter waves-effect waves-light" type="button"> <i class="fab fa-twitter"></i> </button> <button class="btn btn-googleplus waves-effect waves-light" type="button"> <i class="fab fa-google-plus"></i> </button> <button class="btn btn-linkedin waves-effect waves-light" type="button"> <i class="fab fa-linkedin"></i> </button> <button class="btn btn-instagram waves-effect waves-light" type="button"> <i class="fab fa-instagram"></i> </button> <button class="btn btn-pinterest waves-effect waves-light" type="button"> <i class="fab fa-pinterest"></i> </button> <button class="btn btn-dribbble waves-effect waves-light" type="button"> <i class="fab fa-dribbble"></i> </button> <button class="btn btn-youtube waves-effect waves-light" type="button"> <i class="fab fa-youtube"></i> </button> <br> <br> <h4 class="card-title">With Circle buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-circle btn-success</code> to quickly create a General btn.</h6> <button class="btn btn-facebook waves-effect btn-circle waves-light" type="button"> <i class="fab fa-facebook-f"></i> </button> <button class="btn btn-twitter waves-effect btn-circle waves-light" type="button"> <i class="fab fa-twitter"></i> </button> <button class="btn btn-googleplus waves-effect btn-circle waves-light" type="button"> <i class="fab fa-google-plus"></i> </button> <button class="btn btn-linkedin waves-effect btn-circle waves-light" type="button"> <i class="fab fa-linkedin"></i> </button> <button class="btn btn-instagram waves-effect btn-circle waves-light" type="button"> <i class="fab fa-instagram"></i> </button> <button class="btn btn-pinterest waves-effect btn-circle waves-light" type="button"> <i class="fab fa-pinterest"></i> </button> <button class="btn btn-dribbble waves-effect btn-circle waves-light" type="button"> <i class="fab fa-dribbble"></i> </button> <button class="btn btn-youtube waves-effect btn-circle waves-light" type="button"> <i class="fab fa-youtube"></i> </button> <br> <br> <h4 class="card-title">with rounded buttons</h4> <h6 class="card-subtitle">Use a classes <code>btn btn-rounded btn-success</code> to quickly create a General btn.</h6> <button class="btn btn-facebook waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-facebook-f"></i> </button> <button class="btn btn-twitter waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-twitter"></i> </button> <button class="btn btn-googleplus waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-google-plus"></i> </button> <button class="btn btn-linkedin waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-linkedin"></i> </button> <button class="btn btn-instagram waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-instagram"></i> </button> <button class="btn btn-pinterest waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-pinterest"></i> </button> <button class="btn btn-dribbble waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-dribbble"></i> </button> <button class="btn btn-youtube waves-effect btn-rounded waves-light" type="button"> <i class="fab fa-youtube"></i> </button> </div> </div> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="row"> <!-- column --> <div class="col-xlg-6 col-lg-12 m-b-30"> <div class="card-body"> <h4 class="card-title">Group buttons</h4> <h6 class="card-subtitle">Wrap a series of buttons with <code class="highlighter-rouge">.btn</code> in <code class="highlighter-rouge">.btn-group</code></h6> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button> <button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button> <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button> </div> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button> <button type="button" class="btn btn-success"><i class="fa fa-play"></i></button> <button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button> </div> </div> </div> <!-- column --> <div class="col-xlg-6 col-lg-12 m-b-30"> <div class="card-body"> <h4 class="card-title">Button toolbar pagination</h4> <h6 class="card-subtitle">Wrap a series of buttons with <code class="highlighter-rouge">.btn</code> in <code class="highlighter-rouge">.btn-group</code></h6> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary disabled">1</button> <button type="button" class="btn btn-info">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> </div> <div class="btn-group mr-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-secondary">8</button> </div> </div> </div> </div> <!-- column --> <!-- column --> <div class="col-xlg-6 col-lg-12 m-b-30"> <div class="card-body"> <h4 class="card-title">Group buttons sizing</h4> <h6 class="card-subtitle">Wrap a series of buttons with <code class="highlighter-rouge">.btn</code> in <code class="highlighter-rouge">.btn-group</code></h6> <div class="btn-group btn-group-lg" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button> <button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button> <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button> </div> <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> <button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button> <button type="button" class="btn btn-success"><i class="fa fa-play"></i></button> <button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button> </div> </div> </div> <!-- column --> <!-- column --> <div class="col-xlg-6 col-lg-12 m-b-30"> <div class="card-body"> <h4 class="card-title">Vertical buttons</h4> <h6 class="card-subtitle">creat vertical button with class of <code>.btn-group-vertical</code> </h6> <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button> </div> </div> </div> <!-- column --> </div> </div> </div> </div> <!-- End Row --> <div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Checkbox buttons</h4> <div class="btn-group btn-group-toggle"> <label class="btn-primary" ngbButtonLabel> <input type="checkbox" ngbButton [(ngModel)]="model.left"> Left (pre-checked) </label> <label class="btn-primary" ngbButtonLabel> <input type="checkbox" ngbButton [(ngModel)]="model.middle"> Middle </label> <label class="btn-primary" ngbButtonLabel> <input type="checkbox" ngbButton [(ngModel)]="model.right"> Right </label> </div> <hr> <pre>{{model | json}}</pre> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Checkbox buttons(Reactive Forms)</h4> <form [formGroup]="checkboxGroupForm"> <div class="btn-group btn-group-toggle"> <label class="btn-primary" ngbButtonLabel> <input type="checkbox" formControlName="left" ngbButton> Left (pre-checked) </label> <label class="btn-primary" ngbButtonLabel> <input type="checkbox" formControlName="middle" ngbButton> Middle </label> <label class="btn-primary" ngbButtonLabel> <input type="checkbox" formControlName="right" ngbButton> Right </label> </div> </form> <hr> <pre>{{checkboxGroupForm.value | json}}</pre> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Radio Buttons</h4> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model1"> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" [value]="1"> Left (pre-checked) </label> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" value="middle"> Middle </label> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" [value]="false"> Right </label> </div> <hr> <pre>{{model1}}</pre> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Radio Buttons(Reactive Forms)</h4> <form [formGroup]="radioGroupForm"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="model"> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" [value]="1"> Left (pre-checked) </label> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" value="middle"> Middle </label> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" [value]="false"> Right </label> </div> </form> <hr> <pre>{{radioGroupForm.value['model']}}</pre> </div> </div> </div> </div>