I'm using Twitter Bootstrap 3.3.5. When creating a btn-primary in my html like:
<button type="submit" class="btn btn-primary">Button Text</button>
i'm getting a different result as stated on the bootstrap page. I'm talking about the gradient that the button has when I'm using bootstraps button inside my page. When expecting the the element with Chrome's Dev-Console I can see that the gradient comes from the theme.less file and of course I can manipulate it. But shouldn't it be by default like on the bootstrap website?
I found out that removig the
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
tag from my html-head helped already.
I've installed bootstrap via bower. Would be nice if one could "opt-out" the theme via config instead of deleting the theme files or the link tag in head manually.
Related
I am using a bootstrap button on one of my page, that is disabled, and the styling seems to not be working properly
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<button disabled class="btn btn-primary">suivant</button>
<button class="btn btn-primary disabled">suivant</button>
I tried these 2 ways and the result look like this for both approach: initial look || on Mouse over
EDIT: Important to mention that i only have bootstrap4, no personnal style sheet and no other themes
This is a react Project, className is used instead of class
https://codepen.io/jacobweyer/pen/ybqxBK
I've updated this codepen to show Bootstrap4 buttons with BS4 alpha 6. They look like they show up as intended in and outside of React.
<button class="btn btn-primary">suivant</button>
<button class="btn btn-primary" disabled>suivant disabled</button>
Another stylesheet was making conflict with bootstrap that i wasnt aware of
thanks to #MichaelCoker for making me search trough my project again
I use glyphicon icons in my project, I use bootstrap 3.0.0 .
I have problem to display glyphicon-option-vertical icon, it just not displaed!
Here how I use it:
<span class="glyphicon glyphicon-option-vertical"></span>
While all other icons displayed fine.Any idea why this specific icon is not displayed?
Probably it's not declared in your Bootstrap CSS file. You might need to download the latest bootstrap from GitHub. Here you can find the fonts files
https://github.com/twbs/bootstrap/tree/master/fonts
When using ui-select with theme Bootstrap, the "select" looks the same size of a Bootstrap button, ie: btn btn-default
I want the select to look like a "btn-sm" button.
How can I do that? what classes should I modify?
A solution someone gave in the Github site of ui-select:
Wrap the directive in a div with form-group-sm, eg:
<div class='form-group-sm'><ui-select>...</ui-select></div>
https://github.com/angular-ui/ui-select/issues/169#issuecomment-298361767
I've searched for answers on Zurb's site as well as other posts here on SO but haven't found anything that appears to address this issue.
I'm working with Foundation 6 (tried both sites and Zurb templates). Many of the utility classes are working such as top-bar, rows, large, small, medium-column, classes, etc. The default template works as well and shows the different callout elements, buttons, etc.
Some utility classes that were available in Foundation 5 aren't working in 6 such as text-left, text-right, float classes such as right and left or color classes such as white, black, etc. I'm sure there are others but these are the classes I've run across thus far.
I've checked app.scss to ensure nothing is commented out. I also checked the gulpfile.js and it's including all the assets, the SASS for foundation-sites and no javascript files are commented out.
For example, this code from the Zurb site, under v5.5.3 does not activate the panel class or the right or left floats in Foundation 6.
<div class="panel clearfix">
<a class="button right">Float Right</a>
<a class="button left">Float Left</a>
</div>
In my default.html layout, I have the following stylesheets:
<link rel="stylesheet" href="{{root}}assets/css/foundation.min.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">
and the following javascript files:
<script src="{{root}}assets/js/jquery.min.js"></script>
<script src="{{root}}assets/js/what-input.min.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/app.js"></script>
Am I missing a file reference, is there something else I can check to get these classes to work or are these utility classes no longer available in Foundation 6?
The answer apparently is some class names changed and others were possibly removed. Until there is updated F6 documentation outlining the classes, it'll require searching the css for classes that serve the purpose or adding custom classes.
EDIT: For further clarification, I found that the colors listed on this page - http://foundation.zurb.com/sites/docs/global.html, are referring to the colors used but the classes don't work.
For example, adding "alert" as a class to elements should color them red that's listed on the above-referenced page.
Their example, which adds "secondary" to the button element.
To color a component, add the name of the color as a class.
<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>
It doesn't change the color as ".secondary" is not a css class in Foundation 6. What I found by looking at the _settings.scss file is those are actually SASS global variables that are applied to different classes throughout. This is the same for .success and others. ".alert" is a class but only styled when applied in conjunction with other colors.
Looks like it's best to check the _settings.scss file if you're not finding the classes you're looking for or if something isn't working.
I have an issue with the angular ng-show directive.
I have 2 buttons which are working like a toggle button.
index.html
<button class="btn btn-primary"
ng-show="!isShow"
ng-click="showDeleted()">
Show deleted items
</button>
<button class="btn btn-primary"
ng-show="isShow"
ng-click="showDeleted()">
Hide deleted items
</button>
myController.js
$scope.showDeleted = function(){
$scope.isShow = !$scope.isShow;
};
When i click on the button everything is working fine, but in IE10 I can see the hided button flickering. Here is a plunkr if you need one.
Thank you!
Did you try ng-cloak
https://docs.angularjs.org/api/ng/directive/ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display
I think all angular apps (that doesn't use ng-include to load template)
should use ng-cloak to prevent to hide all templates until angular compiles it.