Responsive design
If you are not familiar with grid system, we recommend go through materials on Grid layouts first.
But in short, the basic idea behind grid layout and responsive design are that we divided the viewport into 12 equal-width columns, and we can set different layouts under different screen sizes to make our web page more accessible. This process is known as responsive design: adjusting the page layout based on different screen sizes.
How your layout will adapt to different screen sizes
You may wonder how exactly we define different screen sizes, and the answer to that will be a series of 'breakpoints'. The layout breaks/changes into another arrangement based on the rules you set with certain breakpoints. For example, <div class="col-md-8"> means the element inside this container will take 8 out of 12 columns when the viewport is wider than 768px while it will occupies 12 out of 12 columns in other cases.
Adding different classes to your container, ensures the web page's content won't be 'shrunk' and the content remains readable and accessible with standard font size.
Customised grid viewports
Our grid system is built on the grid of Bootstrap v5. And the breakpoints are customised. Please find the specific data in this table:
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Use cases
Please refer back to Grid layouts for more information.
How your layout will adapt to the screen size
In responsive design, the layout breaks into another arrangement at certain break points. For example, the default layout described above has 12 grid columns evenly spaced within a 992 pixels box with our grid layouts. When we define the grid layouts, we defined how the elements will present for different view ports.
For example, <div class="col-md-8"> means the element will occupy 8 of 12 of the viewport when it is wider than 768 pixels while it occupies the whole width in other cases.
In this way, the webpage does not 'shrink' or 'zoom', and the content remains readable with a standard font size.
Customised Grid Viewports
Our grid system is built on the grid of Bootstrap v5. And the breakpoints are customised. Please find the specific data in this table:
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |