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
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.
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.
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.
