I am new to bootstrap and hence i am working with the help W3schools.com. Now i am modifying a website that have been already made with bootstrap version 3. I have created another html for testing and verifying my code in bootstrap. In the test html, i have included bootstrap.min.css downloaded from here.
I was trying to do input grouping as in w3schools tutorial and it works in my test html and hence i decided to do it in my official website. But when i included the same code in official website the alignment differs and its not working.
When i look into the css folder of official website, instead of bootstrap.min.css it was given that style.min.css. I have asked the former developer of the same site and he said that bootstrap used is version3.
I didn't understand what really differ? what is style.min.css and bootstrap.min.css
Can any one please clarify me?
Related
I have been trying to use Chart JS 4 and its custom plugin API. I can register my plugin globally but not inline.
According to the Chart JS 4 docs you can add plugins globally, using registration while other plugins can be used inline because they do not require registration.
WARNING
inline plugins are not registered. Some plugins require registering,
i.e. can't be used inline.
This sounds vague, and I couldn't find any good information on what that means. In Chart JS 2.x.x I could add a plugin inline but I needed some more features so I had to update to version 4. If I cannot add a plugin inline I guess I will just have to make sure that I turn the plugin off on charts that don't require it. Any suggestions would be greatly appreciated!
Edit:
The solution seemed the be that I had a typo somewhere in my code when comparing it to this sample as pointed out by the helpful comments below. I honestly do not know which part of my code had a typo I just know that it had to because when I used the sample code and worked from there everything worked perfectly.
Jslint says everything is fine, and I am able to add the external libs. Also code works fine in the IDE/browser, not in Jsfiddle
using Jsfiddle I am trying to debug Isotope toggle size and layout in JS fiddle, but I am unable to get the external libs to render.
Can you help, and correct me?
- if the issue is the order of libs, or what options I selected, is it the semi-colon infront of the JS, I thought this is normally good/safe coding in JS..
Here is the code in JsFiddle, it works in the IDE not JsFiddle
I am using the following font awesome, bootstrap, isotope, ba-bounce, jquery 1.11.2 (JSfiddle only shows 1.11.0)
I'm not sure where you were trying to load your resources from, but you need to provide a URL to the css or js file you want to include. These are usually easy to find hosted on a cdn. I have reconstructed your fiddle using cdn links to the external resources:
jsfiddle: http://jsfiddle.net/voveson/popzfey4/5/
I have downloaded a html5 template named Codester. It works on top of Bootstrap 2.
But as of now the current version of Bootstrap is 3. And I am quite familiar with that so I want a method with which I would be able to work in bootstrap 3 but have that template run in bootstrap 2.
Or is there any simple process which will convert that template to bootstrap 3?
You can do this yourself. Download the template, and update it using this information:
http://getbootstrap.com/migration
http://www.bootply.com/bootstrap-3-migration-guide
There are tools that can help:
http://upgrade-bootstrap.bootply.com
http://code.divshot.com/bootstrap3_upgrader
http://twitterbootstrapmigrator.w3masters.nl
But given that you need a template, I don't think this is what you want. It's probably not easy enough, as there are always problems that need a deeper level of knowledge to solve.
Tip: Ask the author of the template! (I cannot find contact details)
Somewhere in my attempt to use the wonderful ui-bootstrap project in my own current project I am going terribly wrong. I've used ui-bootstrap with no issues in the past and cannot see where I am making a mistake. The following punkers illustrate my issue and what it ought to look like.
Link to functional popover directive plunker from angular ui site.
Link to non-functional replication of popover directive that I put together.
Where am I going wrong? I've tried stripping everything down to the barebones and I'm not having any luck in determining what is causing this issue.
For what it's worth this issue applies to any directive that requires a layover of other DOM elements in its functionality (datepicker, tooltip, typeahead, etc.).
It seems the issue lies in the specific files I've included, but being as the versions are the same it doesn't explain to me why including them as I have (as opposed to how they are included in the working example) should make any difference. Any help/advice in this matter would be greatly appreciated.
Your bootstrap css file has a number of issues (including looking truncated and thus missing a number of key css properties you were trying to use).
Using a good version of the Bootstrap css file fixes everything. Here's a new version of your plunker that works: http://plnkr.co/edit/VTjb2S?p=preview
Note the new "new.min.css" which I added- it's just a good copy of the bootstrap minified css. The only change I made is to use that css file instead of the one originally in the plunker.
Or, alternatively, using the CDN version of the bootstrap css also fixes the issues:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
For a test case, I created a test project with the exact same code from Hero Demo and then removed the responsive CSS code.
Why is it that dropdowns do not work unless responsive is also included? I do not wish to use responsive in my project.
There must be something else wrong in your usage. Here's a very basic fiddle (markup copied directly from the linked demo) using just jquery.js, bootstrap-dropdown.js, bootstrap.css.
Make sure you've loaded the scripts before calling $('.dropdown-toggle').dropdown();, and that you're using the proper selector according to the way you've structured your dropdown!
As #crowjonah mentions in a comment above, dropdowns are not dependent on responsive.css. You should verify that you have jquery.js included in your page before bootstrap.js. I have a page that is not including bootstrap-responsive.css and the dropdowns work just fine. Also you should not need to include $('.dropdown-toggle').dropdown() if you are using the correct css tags as described in the demo. The only features that are opt-in are the tooltips and popovers.
Hope this helps, but if not please update your question with more code example of how you have bootstrap implemented.