Does Amp support Bootstrap

By Bootstrap, do you mean the Bootstrap CSS https://getbootstrap.com/docs/3.3/css/ ? If so, then it should work fine in AMP as long as there aren’t JS dependencies, and as long as the amount of CSS does not go above 50KB after tree shaking.

can i embed external style sheet of bootstrap with some custom css in amp custom css tag in head like this

<style amp-custom>
{% include “/bootstrap/css/bootstrap.css” %}
@media screen and (max-width: 767px) {
.header-top {
display: none !important;
}
.i-amphtml-sidebar-mask {
background-color: rgba(0,0,0,0.5);
}
.headerbar {
width: 100%;
background-color: #51c445;
height: 56px;
position: relative;
}
.hamburger {
padding-right: 30px;
color: #ffffff;
position: absolute;
right: 0px;
padding-top: 20px;
display: block !important;
}
</style>
please suggest me ?
because by applying this code. bootstrap external sheet is not embeded.

• This reply was modified 5 years, 11 months ago by adil1641.

Two more question that
1) If i make website in amp from scratch then tree shaking of 50kb also be applied on css code or not?

2) Should i use dropdown menu that is applied in top bar starting with name “about us” and above from banners starting with name “playgrounds” from this link “https://www.creativesystems.com/&#8221; to amp html file in ipad resolution or not?

please suggest me ?

• This reply was modified 5 years, 11 months ago by adil1641.
• This reply was modified 5 years, 11 months ago by adil1641.

You can’t use {% include “/bootstrap/css/bootstrap.css” %} since that is not CSS. You should not construct the amp-custom style yourself either. You should do the normal enqueueing of CSS styles like you would do in a normal WordPress theme.

I am assuming here you are using the new paired/native modes.

And yes, if you have more than 50kb of CSS then the tree shaker will still apply. This is the point of the tree shaker: to take bring excessive CSS down below the 50kb limit.

As for general questions for how to best use AMP components, please refer to https://www.ampproject.org/support/developer/get_support

no, I am not using amp plugin neither wordpress theme. So there is not native/paired mode. one more thing how can tree shaking applied in single index.html file?

I am making the page from scratch in index.html starting from this link “https://www.ampproject.org/docs/getting_started/create/basic_markup&#8221;.

i want to know that i am doing work in amp correctly or not because there is twenty fourteen theme used in my website that,s why i am not using wordpress theme?

please suggest me the questions of these 3 questions or also that i am working correctly in amp or not?

• This reply was modified 5 years, 11 months ago by adil1641.
• This reply was modified 5 years, 11 months ago by adil1641.
• This reply was modified 5 years, 11 months ago by adil1641.

If not using the AMP plugin or WordPress, then this is not the appropriate forum for asking questions. Please inquire via https://www.ampproject.org/support/developer/get_support