Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in claue theme.
Breakpoint | Class infix | Dimensions |
---|---|---|
X-Small | mb |
<576px |
Small | sm |
≥576px |
Medium | tb |
≥768px |
Large | lg |
≥992px |
Extra large | des |
≥1200px |
Containers are the most basic layout element and are required when using our default grid system. 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 contain
Our default .frame
class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.
With Claue theme: .frame
, which sets a max-width
at each responsive breakpoint. The default max-width value is: 1240px
. You can change max-width of .frame
in admin : MGS-> page Builder Setting -> General -> Width of section container
<div class="line">
<div class="col-4">
One of three columns
</div>
<div class="col-4">
One of three columns
</div>
<div class="col-4">
One of three columns
</div>
</div>
Grid system can adapt across all 5 default breakpoints, and any breakpoints you customize. The 5 default grid tiers are as follow:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
||
---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 750px | 970px | 1170px | |
Class prefix | .col-mb or .col |
.col-sm- |
.col-tb- |
.col-lg- |
.col-des- |
|
# of columns | 12 | |||||
Gutter width | 30px (15px on left and right) |
Use the responsive .row-* classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut. With .row-cols-auto you can give the columns their natural width.
<div class="line row-3">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
<div class="d-flex">
<div class="p1">
Flex item 1
</div>
<div class="p1">
Flex item 2
</div>
<div class="p1">
Flex item 3
</div>
</div>
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap..
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
The information below is required for social login
Sign In
Create New Account