I am developing a one page website. I need a bootstrap "modal" class popup to show up when I click on a button. However the template I am using is done in Bootstrap Version 1. I need the "modal" popup to be in Bootstrap v3. Is there any way that I can make this specific part of the html body to use Bootstrap v3?
If I try to include the link reference to Bootstrap v3 at the top of the page the template gets messed up and unclean.
Please help....
Best solution, but not cross-browser
This is not supported by all browsers but you can use :
<style scoped>
#import url("bootstrap-3.css");
</style>
Put this in the modal container <div>.
Cross browser solution
Copy over the modal component from bootstrap 3 then remove the bootstrap 1 modal component (in the css).
Other cross browser solution
Rebuild your template on top of bootstrap-3.
Related
I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
When I use Bootstrap to make a style in my extension in Firefox, the style is applying to browser's style. How to fix it?
with Bootstrap
without Bootstrap
It looks like you're adding the bootstrap CSS via an overlay to browser.xul itself. The bootstrap styles and rules will clash with the browser.xul styles. That is not supported.
You're free to use bootstrap in own (add-on) webpages, and maybe even windows, but you cannot use it in overlays.
I was looking for a (simple) WYSIWYG Editor jQuery Plugin that's compatible with Bootstrap 3. I've seen a lot WYSIWYG Editors jQuery Plugin that were compatible with the previous Bootstrap, but my website uses Bootstrap 3, so each time I implemented such a jQuery Plugin, my Bootstrap 3 would ruin the buttons and mess the whole editor up.
So now I'm asking whether there is an option to enable the Bootstrap 2 stylesheet only for one div and its contents.
I assume a iframe could work, but then, I need the WYSIWYG Editor's contents (which are in the iframe then), along with text inputs on the 'non-iframe'.
One way you might be able to solve this would scope your css for that div. This is what I have implemented with a content management system that I have created.
Let say for example you give the WYSIWYG Div an ID of HTMLEditable.
you could target that div with your css and all the css within that div.
#HTMLEditable .WYSIWYG{
....css goes here
}
#HTMLEditable p{
....css goes here
}
The above css will only apply to that div.
Then its just a case of finding the correct css that you need in that div.
Note you may need to override/reset the css for that div to stop your bootstrap3 applying to it.
Here is an example of a reset css. (You will need to scope this as well to make sure you don't reset all your css).
EDIT: use LESS
To make this easier you can use LESS which is what bootstrap uses.
#HTMLEditable {
//import the modal css
#import "bootstrap.css";
}
you will need to make a file 'HTMLEditable.less'. Then Add the code to similar to the above.
The less will them compile the above into css and will scope everything in the css to #HTMLEditable
Check out the LESS site and look ate the nesting. This is what you are after. This site will also show you how to compile it.
You need to put the class or id of this div before all css rules. You can do it like this if you need a css file and not less.
#HTMLEditable{
paste in all of your css
}
than copy all of this paste it here: http://less2css.org/ in the less area and it will generate the right css for you.
I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.
I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?
Update 2: Here is a gist of v3.1.1 provided by #GFoley83
Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4
You should definitively use the up-to-date version and compile it yourself.
Here is what I did with the bootstrap less files :
.tw-bs {
#import "less/bootstrap.less";
}
And this is the result : http://pastebin.com/vXgRNDSZ
Demo (jsfiddle)
If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.
I used #Sherbrow solution but had to add the responsive file too.
.my-bootstrap-container {
#import "less/bootstrap.less";
#import "less/responsive.less";
}
and then run
node_modules/less/bin/lessc demo.less -x > demo.css
If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.
2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.
say your component is contained in <div id='plugin'>...</div>
You can move what's inside that div to a tag in your head, eg.
<template id="template"><!--Your Code Here--></template>
Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/
I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.
The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:
.bootstrap {
#import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.
.bootstrap html {
box-sizing: border-box;
...
}
I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.
And now you can place content styled using bootstrap inside a bootstrap class:
<div class="bootstrap">
<div class="container">
...
</div>
</div>
I am currently using Twitter Bootstrap in developing an web app. Now I also need to use jqgrid for the same app. So, I have a couple of CSS included for a page.
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/flick/jquery-ui-1.8.19.custom.css" rel="stylesheet">
<link href="../css/ui.jqgrid.css" rel="stylesheet">
However, the grid table generated by jqgrid on the page looks a bit odd since you find Twitter-ish cells in the jgrid table.
So I am wondering if there are any ways to disable one CSS out of several CSS files that I include for a certain element of the page? This time, I want to disable bootstrap css for div tag with id=grid where the grid will show up.
Pretty vague, but here's your solution: use the dev tools in your browser of choice, but i'm going to explain using Chrome:
hover over the affected jqgrid table and click inspect element. dev tools will open up and you should see all the styles being declared on that element, from the separate stylesheets.
if you see any styles crossed out (being overridden) that come from jqgrid, you need to out specify them in your jqgrid style sheet, for example, by adding a class, id, parent selectors or chaining.
also, if there are styles bootstrap is declaring that jqgrid doesn't address (these you're going to have to sift through manually), the same solution applies: add these styles to jqgrid, while specifying the styles you desire and adding specificity to your declarations so they override bootstrap.
If you posted a link, i could show you, which i think would be much easier then this explanation. but this will achieve the style(s) you desire.
You can't disable a stylesheet reference, but you can change the selectors in it to be more descriptive. e.g. if both of these stylesheets just style div, you'll of course get conflicts. However, if you modify bootstrap's selectors to be #twitter div, you'll get much more precise results.