Using Accelerated Mobile Pages with Bootstrap

html css pagespeed accelerated-mobile-page
user70192 picture user70192 · Jun 27, 2016 · Viewed 23.4k times · Source

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!

Answer

Ksenia picture Ksenia · Aug 4, 2016

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

Related questions

Do Images Load Faster in HTML or CSS?

If I load an image using this html on my sidebar Would it load any faster/slower than if I instead put on the sidebar where my style.css (which is called in the header) has .image { width: 200px; height: 200…

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More