Responsive Layout
Responsive layout is the technical implementation of Responsive Design.
Implementation
Page templates in the monolith (ASP & ASP.NET) and in nui-shell (NUI applications) have the Bootstrap Grid System enabled. By default, responsiveness is disabled on pages at widths below 980px. This can be overridden by removing the cnqr-grid-responsive-partial class on the <body> tag. This will allow the page to be fully responsive at any size.
Using CSS Classes
Since page templates already define the styles and containers needed to use the Bootstrap Grid System, you can simply add the CSS row class for rows and the col-* classes for columns on any collection of <div> elements in the page markup.
Using Components
Within a NUI application, there are components from nui-widgets that can be used for implementing responsive layouts. They ultimately emit the same classes as noted above, but it allows you to use ReactJS components and props. The components are:
Breakpoints
See Breakpoints.