Modena Documentation

ContainerX
Class GroupClass NameInstructions
Containers (For Responsive Layout)Container100
Container96
Container90
Container85
Container80
Container75
Container70
Container66
Container60
Container50
Container40
Container33
Container30
Container25
Container20
Container10
Container5
ContinerX is the essential part of grid layout where the number x defines the width of the cell. In order to make a ContainerX responsive, one of the Responsive style classes described in previous section should be added. In addition, since they float, a class called Container should be the parent to clear the floats. Resize browser window to see changes of different colored boxes below.

IndentContainerIndentContainerIndent is optional and added inside a ContainerX class to apply formatting such as padding.
ContainerWrapperContainer is used as the wrapper of ContainerX elements to clear the floats.

Container20 - Responsive


Container30 - Responsive


Container50 - Responsive


Container33 - Responsive50


Container66 - Responsive50


Container33 - Responsive


Container33 - Responsive


Container33 - Responsive

Container40
Container Indent
Card In Container Block
+1 888 123 4567
info@modenamodena.com