Skip to main content

Container

Read all container utilities

Overview

Containers are the outer element used for setting boundaries and grouping multiple content. Container can be fluid or fixed.

Fluid layouts will stretch and fill all the available space when layout width is 100% and the viewport is resized.

Meanwhile, the fixed layout will keep fixed to specific value and don't adapt to viewport size.

NameClass selectorsViewportMax-widthPadding
Extra-small (xs).container-xs300px320px20px
Small (sm).container-sm576px540px32px
Medium (md).container-md768px720px48px
Large (lg).container-lg960px920px24px
Extra-large (xl).container-xl1200px1180px72px

How it works

Ravenbright comes with responsive containers which offers you to select the existing or create new breakpoints.

<!--this section will have the extra large max-w-->
<section class="container container-xl py-24">
<h2>Extra large container</h2>
</section>

<!--this section will have the medium max-w-->
<section class="container container-md py-24">
<h2>Medium container</h2>
</section>
.container {
margin-left: auto;
margin-right: auto;
width: 100%;
@mixin screen-xs-up {
padding-left: var(--rbrh-spacing-7);
padding-right: var(--rbrh-spacing-7);
}
@mixin screen-sm-up {
padding-left: var(--rbrh-spacing-9);
padding-right: var(--rbrh-spacing-9);
}
@mixin screen-md-up {
padding-left: var(--rbrh-spacing-8);
padding-right: var(--rbrh-spacing-8);
}
@mixin screen-lg-up {
padding-left: var(--rbrh-spacing-10);
padding-right: var(--rbrh-spacing-10);
}
@mixin screen-xl-up {
padding-left: var(--rbrh-spacing-14);
padding-right: var(--rbrh-spacing-14);
}
@mixin screen-xxl-up {
padding-left: 0;
padding-right: 0;
}
}

Customize

You can also customize the padding of each container by modifying this code in container.css

:root {
--rbrh-screen-sm: 36rem;
--rbrh-screen-md: 48rem;
--rbrh-screen-lg: 67.5rem;
--rbrh-screen-xl: 85.375rem;
--rbrh-screen-xxl: 100rem;
}

.container-sm {
max-width: var(--rbrh-screen-sm);
}
.container-md {
max-width: var(--rbrh-screen-md);
}
.container-lg {
max-width: var(--rbrh-screen-lg);
}
.container-xl {
max-width: var(--rbrh-screen-xl);
}
.container-2xl {
max-width: var(--rbrh-screen-xxl);
}