Responsive Design

*[arrows-collapse-vertical] Breakpoints #

Breakpoints are used throughout Bootstrap 5 to allow the layout to respond to the screen size. As a side effect, the layout adapts to different device screen sizes and orientations. Breakpoints are either part of the various components or can be used when building your own custom designs.

*[arrow-bar-left] *[arrow-bar-right] Containers #

Containers are most likely the first stack you put on an new page. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with four different containers:

• Full Spacing Container, which has a 100% width and allows for margins and paddings on all sides
• Default container, which sets a max-width at each responsive breakpoint
• Breakpoint container, which has 100% width until the specified breakpoint
• Fluid Container, which has a 100% width at all breakpoints and can have a max width as well

Other then the Full Spacing Container, all other containers support padding on all sides, but only top and bottom margins.

The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.

Containers support flexbox with row, row reverse, column and column reverse direction for items and all sorts of justify and align options for items within the container.

*[grid] Grids #

Grids are a powerful mobile-first flexbox system to build layouts of all shapes and sizes thanks to a twelve column system and six default responsive tiers.

Whenever your content should align best, both on mobile and desktop, you should use the grid system in combination with breakpoints. While multiple content items could take the full width of a large screen, they align vertically on a small screen

*[fonts] Typography #

While the standard text font size is 1rem or 16px, the font size of the text used within a layout changes depending on the screen size making sure that text id not too large on smaller screens or too small on larger screens. This is especially noticeable for headings, but is the case for the Bootstrap font size classes like .fs-1 to .fs-8.

In Stacks we also added breakpoint support for font-sizes in order to give even more control to the designer.

Nevertheless, as a rule of thumb, you should first rely on the default font size of Bootstrap and then use the responsive font size if really needed.

*[distribute-vertical] Spacing #

Containers in Stacks support a special mode for spacing. The so-called Spacer can be used to add space between two content elements, independent of the individual margins and passings of elements. Even space is responsive in Bootstrap 5 and automatically adapts to the screen size.

Similar to the font sizes, Bootstrap in Stacks also supports breakpoint for spacing or margin and passings being used within all elements. This way the designer has even more control and can adapt the spacing to the screen size.

Nevertheless, as a rule of thumb, you should first rely on the default spacing of Bootstrap and then use the responsive spacing if really needed.

*[image] Media #

Media or in other words images and videos are heavily used on the web and in order to scale to the screen size, Bootstrap 5 supports responsive images and videos. The Media stack provides a lot of options for the designer to control the image size and aspect ratio under all conditions. Stacks gives you access to CSS like size calculations using expressions like 100vh - 100px or 100vw / 16 * 9 for an aspect ratio of 16:9 and the object fit setting to contain that determine how a media object scales within a container.

Play with the width, height and object fit settings to get the best results.