13th Mar 2020

How to add bootstrap grid in AMP?

UI/UX

Written By, Parthiv Butani

Overview

As we have discussed in an earlier article “Pros and Cons of AMP from Web Designer View”, where I have mentioned that the AMP page does not support an external CSS, so we are not able to load bootstrap or any other responsive framework in AMP project.

They have suggested a way though, which is to include external CSS but it will increase the size of the CSS which will be a problem considering the AMP Validation Rule.

So, if you are keen to add a bootstrap grid in AMP pages, then the only way to do that is to include the CSS related to the grid. It will not give you the complete functionality of bootstrap, but it will definitely make your page follow the bootstrap responsive structure as per your need.

Customise bootstrap grid css

Let’s begin, how to make the AMP page as bootstrap responsive or how to use the bootstrap grid in AMP pages?. The fundamentals are very easy, load on things that you want. So if we want a bootstrap responsive grid, then only load that much CSS in <amp-custom>, which is obviously less than 50kb.
First open https://getbootstrap.com/docs/3.4/customize/, so you can find the following components with their respective code.

Now select those things that you want in your AMP page. For now, we want a bootstrap grid structure, thus we will select only a grid from the list.
Note: Please make sure whatever you select from the list is not related to any jQuery. Because jQuery will not be supported in AMP Pages.

Download the custom CSS File

Now download that file from the end of the page.
amp-bootstrap-download
As you can see that there are many customization options there, you can also make that customization, and according to that, you have to select the component from the above list so you can get your desired style.

Filter the css file to minimize the size

After downloading, please check the size of your downloaded file. For example, we have downloaded a file with the “Grid” component it will be around “97kb”. Yes, that is also larger than what AMP supports. Now you need to unzip that folder, and you will find the below items.
amp-bootstrap-folder
After selecting “bootstrap.css”, you will notice that file size is only “16 kb”, which is what we need to implement in AMP. There is another minified version of this CSS “bootstrap.min”, which is of only “13kb”.

Now open that file in any text editor, copy that entire code and paste it in your AMP page. That’s it, you are ready to go for a responsive grid of bootstrap with AMP.

If you have good hands-on CSS, then you will be able to remove some unnecessary code from that file too, and it will be up to “12kb” in size, so that part is up to you. So now you can play around with the bootstrap grid classes 🙂

Conclusion

We have also attached the AMP file for the novice.
https://github.com/yudiz-solutions/bootstrap-grid-amp

Hope you will like this article.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd