Layout

Overview

Layout, regroups various component helping you to lay out your project, including wrapping containers and a grid system.

Container

Container is Serenity framework's base layout element.

container
<div class="container">
    Container
</div>

Note

By default, container has a specific max-width for each breakpoint:

  • x-small: 100%
  • small: 540px
  • medium: 720px
  • desktop: 960px
  • widescreen: 1140px

Container also has a padding of 20px for x-small & small breakpoints. This padding is set to 0 for medium and above breakpoints.