Width
We offer two options to define the width of your elements. The preferred one is grid layouts. You may also check on spacing document to make the full use of grid layouts. With grid layouts, everything you defined will be responsive.
Width/Height
In addition to it, we have percentage width classes which are from w10 to w100 with 5 as step, such as w10, w15, w20, and w25.
We also have percentage height classes which are from h10 to h100 with 5 as step, such as h10, h15, h20, and h25.
Responsive sizing
Above classes sizing will apply to all devices. If you want it only apply to specifc device, and in smaller device, the sizing be 100%, we provide the following class.
The classes are named using the format {property}-{breakpoint}-{size}, such as h-md-20
Where property is one of:
w- for classes that setwidthh- for classes that setheight
Where breakpoint is one of: sm, md, lg, and xl . For details about breakpoint, you can check Responsive Design.
Where size is from 10 to 100, increment by 5.
10- for 10%15- for 15%- ...
95- for 95%100- for 100%
If you want content to wrap around objects with defined widths you need to 'float' the object by aligning it to the left or right. When wrapping objects, you may need to provide additional padding and spacing.
Examples
When we are using the divider, the default width is going full.
<div class="divider-solid"></div>
When we are applying the width class here, the width of the divider will be changed:
<div class="divider-solid w20"></div>
<div class="divider-solid w30"></div>
<div class="divider-solid w40"></div>
<div class="divider-solid w50"></div>
<div class="divider-solid w60"></div>
<div class="divider-solid w70"></div>
<div class="divider-solid w80"></div>
<div class="divider-solid w90"></div>
Responsive sizing will change to 100% on different device breakpoint
<div class="divider-solid w-sm-20"></div>
<div class="divider-solid w-md-20"></div>
<div class="divider-solid w-lg-20"></div>
<div class="divider-solid w-xl-20"></div>
We offer two options to define the width of your elements. The preferred way is to use grid layouts. You may also check on the spacing document to make full use of grid layouts. Because this way ensures all elements will be responsive.
But in addition to that, you may also use width classes to define the width of your elements, this is commonly used on dividers, images, etc.
Available classes
Width & height classes
You can adjust the width of an element by using pre-defined width classes ranging from 10% to 100% (with an increment of 5%).
Important note:
These width & height classes will apply to all screen-size devices. For cases like images, we recommend using our responsive sizing classes. Please view the 'Customisation' tab and see how to implement them.
| Class name | Width | Description |
|---|---|---|
.w10 | 10% | The divider line will have a width of 10% of its parent container. |
.w15 | 15% | The divider line will have a width of 15% of its parent container. |
.w20 | 20% | The divider line will have a width of 20% of its parent container. |
.w25 | 25% | The divider line will have a width of 25% of its parent container. |
.w30 | 30% | The divider line will have a width of 30% of its parent container. |
.w35 | 35% | The divider line will have a width of 35% of its parent container. |
.w40 | 40% | The divider line will have a width of 40% of its parent container. |
.w45 | 45% | The divider line will have a width of 45% of its parent container. |
.w50 | 50% | The divider line will have a width of 50% of its parent container. |
.w55 | 55% | The divider line will have a width of 55% of its parent container. |
.w60 | 60% | The divider line will have a width of 60% of its parent container. |
.w65 | 65% | The divider line will have a width of 65% of its parent container. |
.w70 | 70% | The divider line will have a width of 70% of its parent container. |
.w75 | 75% | The divider line will have a width of 75% of its parent container. |
.w80 | 80% | The divider line will have a width of 80% of its parent container. |
.w85 | 85% | The divider line will have a width of 85% of its parent container. |
.w90 | 90% | The divider line will have a width of 90% of its parent container. |
.w95 | 95% | The divider line will have a width of 95% of its parent container. |
We also have the same height classes from 10% to 100% (width increment of 5%). Follow the same notation, for example .h20.
Responsive Sizing
If you want the width class only to apply to certain screen sizes, and automatically change the size to 100% when the current screen size is smaller than the breakpoint, please use the following classes.
The classes are named using the format {property}-{breakpoint}-{size}. For example, .w-md-20
Where property is one of:
w- widthh- height
Where breakpoint is one of: (for more details, please check the documentation on responsive design.)
smmdlgxl
Where size is any number from 10 to 100, with an increment by 5:
10- 10%15- 15%20- 20%...95- 95%100- 100%
Examples
Below we will use dividers as an example, to show how we can control the size of the divider by using different width classes.
When we are using the divider, the default width is going full.
<div class="divider-solid"></div>
When we are applying the width class here, the width of the divider will be changed:
<div class="divider-solid w20"></div>
<div class="divider-solid w30"></div>
<div class="divider-solid w40"></div>
<div class="divider-solid w50"></div>
<div class="divider-solid w60"></div>
<div class="divider-solid w70"></div>
<div class="divider-solid w80"></div>
<div class="divider-solid w90"></div>
Responsive sizing
Responsive sizing will change to 100% on different device breakpoints (make your browser smaller to see the effects.)
<div class="divider-solid w-sm-20"></div>
<div class="divider-solid w-md-20"></div>
<div class="divider-solid w-lg-20"></div>
<div class="divider-solid w-xl-20"></div>