All container types expand to the size of the content placed within them and have a relative CSS position applied by default. Having relative positioning defines a context for a number of WebUI alignment and positioning classes. See the Alignment and Positioning sections to find out more about alignment and positioning.
Whether you just want to apply styles, a simple background, padding, or some custom behaviour, containers are often very useful. Containers do not have any automatic built-in resizing behaviour controlling margins or padding, but WebUI allows you to implement and adjust gutters using responsive gutter classes described below. There are also many options for controlling row and column padding via the grid system. See the Grid system section to learn more about how to use the WebUI grid.
Containers are not required by the WebUI grid system, but are purely to provide a styling context.
The following table lists the container classes and their basic characteristics.
There is no particular requirement to use containers in any specific place, but they each have slightly different behaviours which can be useful. You could easily structure your whole site using only rows and columns, but then it would be more difficult to use the specialised positioning classes. Here are some other reasons why you may wish to use containers:
container - You may want to apply styles to show some separation of content, or apply behaviour. For example showing or hiding content.
body - Good for wrapping areas of content, where it is important that any overflow is not hidden. For example you might want to use it as a container for a menu, since dropdowns could be any size - the container class is equally suitable for this purpose.
box - Good for laying out areas of content, where you don't want any content to go outside the bounds of the container. For example you might want to use it to lay out sections within a modal or Facebook style media block.
panel - Great for an alternative to box with a bit more padding.
area - Great for wrapping user input forms, where more padding may be required.
Media Container Classes
The following table lists the media container classes.
Media containers provide an easy way to display video and many other kinds of media at a specified aspect ratio. The key to this is to use the class media-content on the element being contained. You can constrain the width of the media element by using WebUI width-* classes. See the following examples:Example
<div class="panel gap-vertical-sm"> <div class="media-container-21x9 width-xl"> <iframe class="media-content" src="https://www.youtube.com/embed/xtzRxeaf5NQ?autoplay=0"></iframe> </div> <div class="media-container-4x3 width-two-thirds"> <img src="/webui/assets/images/fuji.jpg" alt="Media" class="media-content" /> </div> </div>
Responsive GuttersWebUI includes responsive gutters which can be applied to any container type or any row type - they can also be applied to most block level elements and on img tags also. This makes them super useful when you need a margin around elements to automatically increase or reduce depending on the width of the browser window, for example.
Responsive gutter classes are defined as follows.
Classes that add a responsive margin to the left and right of the element:
Classes that add a responsive margin to the left only or right only:
Responsive gutters should not be applied directly to columns, but there is no problem with placing containers inside columns and applying responsive gutters to the containers.