twitter-bootstrapcontainersamp-htmlamp-story

What will <div="container-fluid"> do in amp-story?


http://stackoverflow.com/questions//container-fluid-vs-container

https://www.jquery-az.com/bootstrap-container-and-container-fluid-what-is-the-difference/

The .container class is the fixed width container. That does not mean it is not responsive. It is responsive; however, it is fixed based on screen size. The screen sizes include:

xs for extra small devices (used for less than 768 e.g smart phones, mobile etc.)
sm for small screens (From 768 pixels and up e.g. tablets)
md for the medium screen (>= 992 pixels. Desktops/Laptops)
lg for large screens (>= 1200. Pixels e.g. large desktops)

The container-fluid class will take the full width of the viewport. If you use the container-fluid and resize the browser, you may notice the content inside it will adjust with every pixel to take the full available width.


Solution

  • By default, it will do nothing, as this is not a part of amp-story.

    This class comes from Twitter Bootstrap, so I've added the [twitter-bootstrap] tag to your question. You would need to inline the Bootstrap CSS and not use the Bootstrap components or JavaScript. Since that would require inlining ~20kb of CSS, it would probably be more performant to write your own media queries.

    Also, the way that amp-story handles responsiveness is likely not compatible with Bootstrap, since the amp-story desktop UI has multiple smaller "viewports" within the browser window, which Bootstrap would not understand.