I'm building a browser extension and I want to use bootstrap in it. Problem is the bootstrap css is colliding with the page's css messing up some websites.
Is there a way to separate the content script css from the web page's css? Is there some known solution to this?
You can provide a namespaced version of bootstrap, where global styles are not applied outside a namespace CSS selector.
For generating this you must build bootstrap yourself using SASS.
This answer is a good resume of the procedure: How to namespace Twitter Bootstrap so styles don't conflict
Related
I am working on a css template, which of course helps me to develop a beautiful website. I mean, good to see. Now, I am trying to integrate code from all over the web, such as, for example, a beauatiful contact form that I absolutely want in my website. The problem is that the css of the element conflicts with the css of the website and overwrites many rules.
How can I avoid this?
could you please share the codes or the link of your site and the form? Try to write the css after the main website css. If not solved the problem then try to rewrite the classname alongside with the css. It is quite impossible to solve problem without seeing your code.
you can add div tag surrounded in page and add a special class or id and define this class before CSS styles. actually you define the special styles for certain styles
I have a website that uses Bootstrap. Technically, I'm using Bootstrap 4 at the moment. I want to leverage Accelerated Mobile Pages (AMP) in the publicly-facing parts of my page. However, I have several errors that I can't seem to shake. This has me wondering, can I even use Bootstrap with an Accelerated Mobile Page?
Am I even allowed to use JavaScript in Accelerated Mobile Pages? Bootstrap has JavaScript for the hamburger menu on mobile phones. Yet, when I run the validator, I see errors like:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'.
The attribute 'rel' in tag 'link rel=' is set to the invalid value
The tag 'script' is disallowed except in specific forms.
So, back to my question. Is it possible to have a Bootstrap 4 site that uses Accelerated Mobile Pages?
Thanks!
Right now you cannot use bootstrap with AMP because it inserts a lot of unnecessary CSS and AMP is optimized for performance, but you can use font-awesome in AMP HTML by including it like so:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
See the original issue on github: https://github.com/ampproject/amphtml/issues/2413
Try this bootstrap 4 CSS prepared for AMP project:
https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css
This project is based on orginal bootstrap 4 fork.
All components loaded in the CSS file are placed:
https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss
If you need add custom components, you can add in the "scss/bootstrap-amp.scss" file and recompile using:
$ npm run amp-css
Disclosure: As #Filnor notice, it's forked and modified by me.
You can create a custom bootstrap version from: Customize Bootstrap
Uncheck unnecessary properties and export it. It must be less than 50kb. Remove every "!important" rule and put it in your site as inline css.
I was wondering this too. On the github page for the AMP project it states that
It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML.
So you cannot use custom JS like you are used to doing. Instead you have to build out the pages the AMP way and use custom elements as specified by them.
To get rid of error with maximal size of author's CSS, you can also do following steps when you want to use AMP and Bootstrap together:
put your entire css and bootstraps' css into one css file, lets say entire.css
Download and install https://github.com/purifycss/purifycss
use purify: purifycss entire.css yourpage.html --min --info --out minified.css
if minified.css is smaller than 50k then you can put content of this file in <style amp-custom>
if not, you can use on of online css minifiers / compressors.
EDIT:
There is unfortunately one problem that is hard to workaround. Bootstrap uses in many places !important keyword, which is restricted by AMP. The AMP validator shows this errors first when you got with custom CSS below 50kb.
As per the AMP specification you can only use inline css with a total max size of 50kb. You can use bootstrap css and components with AMP if those components do not rely on bootstrap.js since AMP dosent allow 3rd party JS as of now.
Plus, you need to remove !important wherever it is used in bootstrap css as AMP restricts the use of !important in inline css.
I know this question is old but recently (in 2021), I've found BootAMP
https://www.jssaints.com/bootamp (Bootstrap like CSS framework for AMP HTML).
Using it, it is easy to add AMP HTML support by migrating from Bootstrap to BootAMP
https://www.jssaints.com/bootamp/docs/introduction
They also provide few ready-made AMP-HTML templates
https://www.jssaints.com/bootamp/boilerplate
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I have site created already which is not bootstrap, and now i need to implement the bootstrapValidator for the validation purpose, if i include bootstrap css then my site style also changing,
Is there any way to include bootstrap form styles alone in html, apart from cut copy in bootstrap css file?
You can use the Bootstrap Customizer
and check only the "form" checkbox to download only the part you need...
Use customize css download from bootstrap site, here you see the options of customizations. You can choose what you want in your CSS. Or you can use less css, download the bootstrap less master from github and compile theme as per your project needs.
The only way to do this is to find a stylesheet that someone else took the time to copy / paste from the Bootstrap. I've done this on several occasions, and its pretty simple as all the form-styling elements are placed next to each other in the bootstrap stylesheet.
So, find you scissors :)
You can't import a part of a css file, so you can copy/paste your desires classes on your actual css or rename your classes in your css file to not have conflicts with bootstrap's classes name and then your site's style will not change when you include bootstrap.
I'm building a JSP component (jsp-tag), which should have a bootstrap look,
because we use Bootstrap on some, not all pages. My component needs only
3 bootstrap classes for buttons (CSS classes .btn, .btn-success, .btn-error),
nothing else.
I would like to have that JSP component as self-contained as possible,
so I don't want to add the 100+KB bootstrap.css within my component,
but only a minimal CSS.
And another reason not to include the big bootstrap.css:
I don't want to change (=destroy) current pages with bootstrap styles.
Can I extract easily the styling for Bootstrap buttons somehow?
I copied and pasted the bootstrap stylings from my Firebug, which
works well on modern browsers (IE9+, FF, Chrome), but not on IE8.
So IE8 uses some CSS stylings that I could not reliably find out.
You can create a custom bootstrap build for yourself via the bootstrap website.
Here's the link.
Just select the components you want and download the generated css file.