I have a complex site that has lots of CSS, including jQuery UI and more.
I have added twitter bootstrap 3 (latest at this time) and I wanted to use it just to style a single link as a button.
Well, I got the button and it is awesome!
But also, somehow my fieldset's <legend> element got a different styling, and my existing menu suddenly started using larger font-sizes, messing up my existing layout.
My impression is therefor that adding twitter bootstrap messes with your existing components, whether you like it or not. I am not sure if it always does this, or if it is a complex interaction between my existing CSS and the bootstrap.
My question: how do I limit bootstrap to styling my single button only (and leave the rest alone)? Is that possible?
My code was:
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen" />
.....
<fieldset>
<!-- somehow the legend text below changed from existing pre-bootstrap styling -->
<legend>Menu Selection</legend>
<table>
.....
<a href="#" class="btn btn-default btn-info btn-lg">
<span class="glyphicon glyphicon-cog"></span>
button</a>
Why don't you copy the Button style and include it in custom.css and ignore Bootstrap.css.
I don't think it's a good idea to include a big framework just to style a button/link?
Alternatively, use the Bootstrap customizer to download the parts you 'want' to use.
Also, you can create different versions of the Bootstrap.css file via division.
Here's an image.
Related
Is there a way to drop in a stylesheet that updates the form elements to material theme?
I'm using a plain HTML page and want the theme to fill in the width and heights of the form elements I have on the page.
I can assign class names to the elements to style them or if the stylesheet would apply to existing elements that would work as well.
You can assign the Material Design classes after you include the asset files in your project header and footer.
CDN:
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
NPM:
npm install #material/form-field
Button Example:
To style the button (submit for example), you add class as following, where foo-button will be your custom CSS to overwrite:
<button class="mdc-button foo-button">Button</button>
Form Example:
To style the form you can follow the Form Fields instruction.
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
...
</div>
</div>
<label for="my-checkbox">This is my checkbox</label>
</div>
The JS part to handle error and validation is a little bit tricky, but if you use the console to manage the handlers etc, you should be able to manage.
I might be asking a dumb question, but I am a newbie in javascript and its libs.
I came across the same problem as this post, and in the accepted answer, there was this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
However, after adding this line I have a navbar icon even though I did not include a img in my html. I also cannot manipulate the position of this icon built with this stylesheet. Can anyone explain what it does in this context? (referring to the post) I noticed that without this line of code the CSS and Javascript cannot be applied to a simple
<img class="search" src="icon.png" width="30" height="30">
And how is it possible for me adjust the location of the icon with this line of code?
font awesome is a css sheet, that when you use "font awesome classes" on a particular element, makes an icon appear. there's no jpgs or anything to mess with.
<i class="fa fa-address-book" aria-hidden="true"></i>
in a plain html, this will do nothing. but if you add the stylesheet to the page, you will see an address book icon.
all icons are located here: http://fontawesome.io/icons/
I am using angular, and added bootstrap-toggle using bower. I also included the appropriate css, and js files in my index.html. In my resource file, I need to create a toggle switch. I include the following line:
<div>
<input type="checkbox" checked data-toggle="toggle">
</div>
I don't want to add this line using javascript. It is showing up as a checkbox rather than a toggle. Is there something that I am missing?
css link snapshopt
js links snapshot
If you are using, Bootstrap v2.3.2, then you should be using bootstrap2-toggle.min.js and bootstrap2-toggle.min.css.
Make sure you load the bootstrap-toggle.css after the main bootstrap.css file.
Also, make sure load the bootstrap-toggle.js after the main bootstrap.js. right before you close the body tag.
Don't forget the jquery, it needs to go before both js files.
For future readers.
I have fixed the issue by loading jquery and bootstrap js files before bootstrap toggle js.
Same for css files. First bootstrap css and then bootstrap toggle css.
It is better to include the .min.css and .min.js since these versions are minified meaning all whitespace removed to reduce file size and increase speed.
Firstly include jquery JS.
<script src='https://code.jquery.com/jquery-1.10.2.js'></script>
You need to include bootstrap-toggle.min.css after the main bootstrap.min.css file.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
Then also include, bootstrap-toggle.min.js followed by bootstrap.min.js.
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>
Now your checkbox will work as a toggle-checkbox.
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>
I'm new to jQuery Mobile and I'm trying to figure out how exactly to customize buttons. Which classes do i have to use to access certain css properties?
For instance I know that if you want to change the background color of a button you write .ui-btn-inner {background: white;}. But when I do it this way it doesn't work out all the time.
I already looked on the jQuery Mobile API website but I can't seem to find anything that really explains this concept in depth.
If someone could provide me with a website or an explanation about these classes that would be much appreciated.
You can inspect the html to see what jQuery mobile buttons look like.
For a basic button, created by:
Link button
the output looks like:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Link button</span>
</span>
</a>
Create and load a custom CSS file after the jQuery mobile css.
Here you can override individual css classes, like
.ui-btn-inner {
// !important does the trick
background-color: #FF0 !important;
...
}
You sometimes might have to add !important to the css in order to override jQuery mobiles CSS. But I actually do not know when this is necessary, I just do it if it does not work without...
You can look up the structure of all elements in the jQuery mobile CSS, or, as i mentioned before, use the web inspector to see what jQuery turns your markup into.
PS
A more in-depth look at how the CSS works, is provided here