I assumed there is no difference until I spent hours trying to figure out why my buttons do not align properly.
Originally, I had the following code:
<div class="col-sm">
<button id="btnRegisterX" type="button" class="btn btn-Orange" data-toggle="modal" data-target="#mdlRegisterX">X</button>
</div>
<div class="col-sm">
<button id="btnRegisterY" type="button" class="btn btn-Orange " data-toggle="modal" data-target="#mdlRegisterY">Y</button>
</div>
<div class="col-sm">
<button id="btnRegisterZ" type="button" class="btn btn-Orange" data-toggle="modal" data-target="#mdlRegisterZ">Z</button>
</div>
The purpose was to have the buttons lined up in one column. That was not the case. They were in separate rows, but no matter how much I tried, the buttons did not line up. However, when I tried the <asp:Button.../> alternative (the exact same attributes in each button, just in that format), everything worked as intended. There was also nothing in the CSS file that contained any alignment attributes for those particular classes.
Any thoughts as to why?
Related
https://coreui.io/demo/React_Demo/#/buttons/buttons
Why do the buttons in the 'Options' card have space between them and the rest of the cards do not?
The CSS is identical of the button's, and the container card
No-one in my office can find the cause.
I have moved the Options card to a different location in the DOM and that makes no difference.
The difference is in the HTML, not the CSS
The first 'Options' card has whitespace between the buttons and the rest do not.
<div class="card-body"><button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-link">Link</button> </div>
I am trying to change CSS property by element ID using vanilla JS?
I am trying to achieve the following effect:
After the first button is clicked on the bottom bottom, the first button on the top should change it's class from btn-dark to btn-warning.
The remaining buttons should follow this same pattern: #b2 clicked should result in #d2 being changed from btn-dark to btn-warning.
My current attempt:
<div class="row">
<button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-dark"
id="d{{number}}"
>
</button>
</div>
<div class="row">
<button (click)="onClick($event)"
*ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-secondary"
id="b{{number}}">{{number}}
</button>
</div>
Screenshot displaying the template
Use ngClass, e.g.:
<button [ngClass]="{'btn-dark': true}">...</button>
Try like this
it will changed one of them at a time
stackblitz demo link
I have a bootstrap button group with two buttons and I want some text to span across the two of them.
They are Decrease and Increase buttons. So I have the text "Contrast" across the two buttons with a "-" on one button and a "+" on the other button.
I have overlayed(?) a div with the required text on top and used "pointer-events:none" to get it working - BUT I need it to work on older browsers (IE 10) that do not support pointer-events.
Is there an alternative/better way of doing it??
<div class="btn-group">
<div style="position:absolute;top:5px;left:3px;text-align:center;width:100%;color:white;z-index:300;pointer-events: none;">
<i style="left-padding:2px;vertical-align: middle;" class="fa fa-adjust fa-2x"></i>
<div style="display:inline;top: 2px;position: relative;">Contrast</div>
</div>
<button type="button" class="btn">
<br> <br>-
</button>
<button type="button" class="btn">
<br> <br>+
</button>
</div>
In the end I changed the design so that there were separate buttons and did not use a word spanning the two buttons.
I'm trying to have two different elements, one that would be shown on phones + tablets, and one that would be shown on desktops/etc. These two different items also have tooltips, that I want to always be shown (so not using the hover)
The issue I'm running into, is both tooltips are always displayed, even if the responsive element (div, or a button in this case) are hidden.
HTML:
<div class="container">
<div class="row col-md-12">
<button type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button>
<button type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button>
</div>
</div>
JS:
var opts = {"container": "body", "trigger": "manual", "html": true};
$('.tooltip-btn').tooltip(opts).tooltip("show");
I have an example JSBin: http://jsbin.com/UFoRIYex/508/edit
Possible to do?
The issue is caused by the fact that you are applying the tooltip either way, irrespective of if the button is visible at all. To go around that, you'll have to first give an id to your buttons...
<button id="small" type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button>
<button id="medium" type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button>
... then check for their visibility in js as follows:
if ($('#small').is(':visible'))
$('#small').tooltip(opts).tooltip("show");
if ($('#medium').is(':visible'))
$('#medium').tooltip(opts).tooltip("show");
I updated your PasteBin here: http://jsbin.com/UFoRIYex/509/edit
If I remove the tag the button aligns perfectly but it doesn't link. I've tried multiple combinations with the anchors and no success. Please help.
NOT ALIGNING MIDDLE:
<div class="span12" style="text-align:center">
<a href="mailto:partnerships#medicaldoctorapps.com">
<button class="btn btn-large btn-primary">Contact us to get started</button>
</a>
</div>
ALIGNS MIDDLE FINE BUT NO LINK OUT:
<div class="span12" style="text-align:center">
<button class="btn btn-large btn-primary">Contact us to get started</button>
</div>
You must have some other CSS conflicting, take a look here with no CSS they both look fine (http://jsfiddle.net/4kZ3p/). Have you used inspect element (https://developers.google.com/chrome-developer-tools/docs/elements)? its a handy tool when debugging CSS.
Look in the css for the A tag.
-Ken
Needed to add this code to get the jsfiddle to submit but its just your code from above:
<div class="span12" style="text-align:center">
<a href="mailto:partnerships#medicaldoctorapps.com">
<button class="btn btn-large btn-primary">Contact us to get started</button>
</a>
</div>
<div class="span12" style="text-align:center">
<button class="btn btn-large btn-primary">Contact us to get started</button>
</div>
Insead of Span use the default col classes of Bootstrap.
<div class="col-lg-12" style="text-align:center">
<button class="btn btn-large btn-primary">Contact us to get started</button>
</div>
In Bootstrap 4:
<div class="col-12 text-center">
<a class="btn btn-outline-primary" href="mailto:partnerships#medicaldoctorapps.com">Contact us to get started</a>
</div>
as Ken Koch said, you may have conflict. If you test with Google chrome right click the button, inspect element and select the "a" tag to see how it's affected by css
If you're using bootstrap just use <a class = "btn btn-large btn-primary">
And here's a fiddle that works for me.
http://jsfiddle.net/HAsPV/
To bring center the text, you can use col-md-offset-3 (number can be used according to the need it helps).
<button type="button" class="btn btn-default center-block">Centered Button</button>