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 vote183 views1 answer
MailChimp C# Api calls
C#
-3 votes163 views1 answer
How to split a string by in c#
C#
21 votes174 views2 answers
Press key run code unity c#
C#
6 votes185 views4 answers
SQLite Drop Table
C#
0 vote183 views1 answer
Flyt wordpress fra localserver
C#
0 vote180 views1 answer
Billboard canvas unity
C#
32 votes205 views4 answers
How to print using C#
C#
0 vote162 views1 answer
Web client ignore ssl error
C#
3 votes220 views1 answer
Mouse button hold unity
C#Unity
0 vote170 views1 answer
C# load button image from resource
C#