The SWE uses Bootstrap's grid system, with a custom responsive gutter system. The sizes for the gutter are as follows:
xs
, sm
, and md
screen sizes, the gutter is 30px to conserve screen real estatelg
screen sizes, the gutter is 50px.Bootstrap’s documentation has comprehensive information about how the grid system works.
The SWE uses the following standard Bootstrap media queries:
// Extra small devices (portrait mobile phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape mobile phones, tablets, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, laptops 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
The SWE uses a responsive width that has a custom maximum width of 1327px.