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 Customize and Download bootstrap, 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.
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.
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.
Bootstrap Grid AMP
Hope you will like this article.
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
