Note: Span in the image below = Bootstrap Size in the Joomla! CMS.
When assigned to a website Module, Bootstrap Size determines Module width.
The Bootstrap Grid System is comprised of 12 columns across the screen.
The grid is responsive, meaning the columns will re-arrange in response to the screen size.
For example, content displayed:
in three columns side by side on a large screen (PC & Tablets in landscape view) but
stacked one on top of the other in a single column on small screens (Phones & Tablets in portrait view).
The 12 columns can all be used individually, but it is more practical to combine groups of them, making a small number of wider columns, as illustrated in the above image.
Examples
When you set the Bootstrap Size of of a Module to 12 then it will fill the available width in the Position to which the Module is assigned.
Set the Bootstrap Size to 6 and it will fill one half of the available width.
Set the Bootstrap Size to 4 and it will fill one third of the available width.
Set the Bootstrap Size to 3 and it will fill one quarter of the available width.
