Button group bootstrap

Bootstrap 4 button

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Bootstrap button group

<div class="btn-group">
  <button type="button" class="btn btn-success">Add</button>
  <button type="button" class="btn btn-warning">Update</button>
  <button type="button" class="btn btn-danger">Delete</button>
</div>

Bootstrap button group

<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">1</button>
    <button type="button" class="btn btn-secondary">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>

Source: getbootstrap.com

Bootstrap 4 Button Groups

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Button group bootstrap

  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>

Bootstrap btn-group open

/*
I solved this be adding a query selector and accessing the children and setting 
the class name via the Renderer. 
In bootstrap 4, the open class was replaced by the show. 
Therefore use show instead. Attach the class on the ul

As shown Below:
*/

import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from "@angular/core";

@Directive({
  selector: "[appDropdown]"
})
export class DropdownDirective {

  @Input ("appDropdown") index : number;

  constructor(private theElementRef: ElementRef, private theRenderer: Renderer2) { }

  @HostListener("click") toggleDrawer() {
    let elements = this.theElementRef.nativeElement.querySelectorAll('.show');

    if (elements.length > 0) {
      this.theRenderer.removeClass(this.theElementRef.nativeElement.children[this.index], "show");
    } else {
      this.theRenderer.addClass(this.theElementRef.nativeElement.children[this.index], "show");
    }
  }

}

Source: stackoverflow.com

Similar codes

0 vote255 views1 answer
Blazor use static json files
C#
1 vote300 views1 answer
How check if variable is send to page or not in laravwel
C#
0 vote299 views1 answer
C# invokerequired wpf
C#
1 vote313 views1 answer
Change vignette intensity unity
C#Unity
24 votes279 views7 answers
Qwertyuiopasdfghjklzxcvbnm
C#
0 vote283 views1 answer
Google sheets problems cell not considered even
C#
1 vote282 views1 answer
C# append to int variable
C#
0 vote297 views1 answer
Static initializer
C#
1 vote296 views1 answer
Unity instantiate with name
C#
1 vote296 views1 answer
HCF of list of number
C#