Official sizes are LARGE (1200+), MEDIUM (992+), SMALL (768+), X-SMALL (768-)
GDH2 Comment - The above "navigation bar" is common because it adapts well to the small displays. The "navbar" automatically becomes 2 lines if it will not fit on 1 line and is replaced by a navigation icon (aka a "hamburger") in the top right corner when the screen is EXTRA SMALL (mobile device).
Panel "body" style = Panels can create a nicely framed box.
In some themes the stylistic differences between different panels is large, in others they are identical. Most themes use a heading (h3) for all the panels except body, and in some themes "h3" is very large, so modified my "danger-panel" comments to not use "h3".
The inside can contain text, links, images, buttons, and special formatting.
Gobbledygook text is used for filler - Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. >Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
It is truly remarkable that Bootstrap gives the coder the tools to make one web design that will work on the myriad different screen sizes. It used to be that the small mobile phone screens required a completely different address and it's own code.
The coder would need to go to multiple pages and try to make identical changes to correct an error, change design, add something, whatever.
Note: The rules in this example apply ONLY to Large & Medium screens. The layout will display each of these columns across the whole screen when the screen is Small or X Small. Otherwise it all would be too squished to be readable. It is possible to have these rules apply to SMALL screens, just not practical.
Example
This column is defined as 4/12 of the available space. The column to the right is 8/12 wide.
Let's break this column (4/12 wide) down further, even though it's impractical.
Col 2
This is 2/12 of space.
Column 4
This column is defined as 4/12 of the available space.
Column 6
This column is defined as 6/12 of the available space. Any column can be further divided, so let's do it.
Col 4
This is 4/12 of available space.
Column 8
This is defined as 8/12 of the available space.
Random Sports Image 100 pixels wideSample themes can be viewed at BootSwatch (this link does work). The differences can be spectacular!
SuperHero Theme
United Theme
Note: The rules in this example apply ALL SIZES of screens. Does it seem practical to you?. I decreased some of text.
This column is defined as 4/12 of the available space. The column to the right is 8/12 wide.
Col 2
This is 2/12 of space.
Column 4
This column is defined as 4/12 of the available space.
Column 6
This column is defined as 6/12 of the available space. Any column can be further divided, so let's do it.
Col 4
This is 4/12 of available space.
Column 8
This is defined as 8/12 of the available space.
Random Sports Image 100 pixels wideSample themes can be viewed at BootSwatch (this link does work). The differences can be spectacular!
SuperHero Theme
United Theme
(drag screen larger or smaller)
Paradise Trail at Mad River Glen (text-size=125%)
This is what the final solution should look like. The coloring will be different based on the theme you select. This is what the final solution should look like. The coloring will be different based on the theme you select. This is what the final solution should look like. The coloring will be different based on the theme you select.
End of Bootstrap Class Lab #1