Section Container Types in Astroid Framework

Astroid Framework grid system is typically based on Bootstrap 4, And it provides all type of containers options that Bootstrap 4 have. Below is the list of different types of containers.

1. Container Fluid - to make a full width container
2. Container Fluid with No gutters - to make a full width container without gutter space
3. Container - to make a fixed width (Bootstrap default) container
4. Container with No gutters - to make a fixed width (Bootstrap default) container without gutter space
5. Without Container - to skip container div
6. Custom Container - to use a custom container class

Custom Container

Section's Custom Container option provides ability to use your pre-made custom container class.

For example if you have a custom container class named my-custom-container then you just need to choose custom container option and add my-custom-container class into Layout Custom Class option.

Create Custom Container in Scss

In order to create a new custom container you need to add following code into your template's scss code, And specify your container widths for different breakpoints. After that you can use your custom container class in Layout Custom Class Option.

$custom-container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@include _assert-ascending($custom-container-max-widths, "$custom-container-max-widths");

$custom-grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@include _assert-ascending($custom-grid-breakpoints, "$custom-grid-breakpoints");
@include _assert-starts-at-zero($custom-grid-breakpoints, "$custom-grid-breakpoints");

.my-custom-container {
    @include make-container-max-widths($container-max-widths, $custom-grid-breakpoints);
}