i'm a beginner in angular, i want to display glyphicon-search glyphicon icon but i can not, i'm using angular5 bootstrap 4
<span class="glyphicon glyphicon-search"></span>
<h1>fffff</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
Have you check that you installed bootstrap 4 or included package into header
Related
We are having ngb dropdown such as below
<div ngbDropdown class="d-inline-block" >
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
Somehow we tried attaching the [disabled]="true" but is not disabling.
Any other way or how to do it ?
Put your code inside ng-container to disable it.
I'm trying to make this button, link to a specific URL but I don't know where to add it in the code of the button, I'm using bootstrap 4.3, thank you!
Code
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-right text-light"></i>
</button>
Add onclick="location.href='{url goes here}'" to your button tag.
Working example
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" onclick="location.href='https://stackoverflow.com'">
<i class="fas fa-align-right text-light"></i> Go to Stackoverflow
</button>
I want to have a multiple nested offcanvas for Bootstrap 5.
When I click a button, the first offcanvas should be opened and then click another button which is on the first offcanvas, the second offcanvas should be opened over the first offcanvas and the first offcanvas should not be closed.
I will make second one smaller and so the first one still be shown.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample2" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample3" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample4" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample6" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample6" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
From the Bootstrap docs...
"Similar to modals, only one offcanvas can be shown at a time."
I have an angular 2 application that uses bootstrap 3.3.7 and jquery 1.12.4. The code is as follows:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle"
title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
>
<span class="sr-only">More actions</span>
<i class="fa fa-ellipsis-v fa-lg" ></i>
</button>
<ul class="dropdown-menu dropdown-menu-right menu" role="menu">
<li>
<button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
>
<i class="fa fa-files-o" (click)="Copy($event)"></i>
Copy
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move">
<i class="fa fa-arrows" (click)="Move($event)"></i>
Move
</button>
</li>
<li>
<button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share">
<i class="fa fa-share " (click)="Share($event)"></i>
Share
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete">
<i class="fa fa-trash" (click)="removeItem($event)"></i>
Delete
</button>
</li>
</ul>
</div>
The dropdown menu appears fine. But clicking on the individual buttons in the list is not invoking the associated event handler. This issue is occurring on Safari browser on iOS and Chrome on Android. However, it works perfectly on Edge and Chrome on the laptop/desktop.
I have tried various solutions provided for earlier versions of Bootstrap on stackoverflow and github, but they aren't working.
How do I get this to work?
I resolved this issue by using the dropdown from ng2-bootstrap --> https://github.com/valor-software/ng2-bootstrap
I have button group in my asp.net mvc application:
<div class="btn-group">
<button type="button" id="btn-create-file-window" class="btn btn-default"><span class="glyphicon glyphicon-file"></span></button>
<button type="button" id="btn-open-file" class="btn btn-default" disabled="disabled"><span class="glyphicon glyphicon-edit"></span></button>
<button type="button" id="btn-delete-file" class="btn btn-default btn-danger" disabled="disabled"><span class="glyphicon glyphicon-remove"></span></button>
</div>
After page reloading I get this result:
If I hover my mouse on the btn-create-file-window in Chrome33, I get expected result (same, as ie10). What am I doing wrong?
Bootstrap v3.1.1 from Nuget
Internet Explorer 10
Chrome 33.0.1750.154 m
my bad English :)
My problem is resolved in Google Chrome 34