Bootstrap Grid - Revision history

PeterRobert at 11:11, 17 September 2024

2024-09-17T11:11:39Z

2024-09-17T11:11:02Z

2024-04-01T10:43:08Z

2024-04-01T10:42:27Z

2024-04-01T10:41:16Z

2024-03-31T13:18:07Z

2024-03-31T13:13:26Z

2024-03-31T12:53:54Z

2024-03-31T12:50:56Z

2024-03-31T12:48:41Z

@@ Line 8: / Line 8: @@
 Within each container, each row has twelve columns.
-Each column can be made to behave differently according the size of the viewport of the device being used to view the page, that is, it is 'responsive'.
+Each column can be made to behave differently according the size of the viewport of the device being used to view the page, that is, it is '''responsive'''.
-Bootstrap has six default responsive tiers or breakpoints.
+Bootstrap has six default responsive tiers or '''breakpoints'''.
 [[Image:Bootstrap Breakpoints.png|800px]]

@@ Line 35: / Line 35: @@
-Learn more: https://getbootstrap.com/docs/5.3/layout/grid/
+Learn more: '''https://getbootstrap.com/docs/5.3/layout/grid/'''
 <hr>
 {{Contribute}}

@@ Line 24: / Line 24: @@
 The first element has the class, '''col-md-8'''. This will default to full width (spanning 12 columns) on viewports smaller than medium (md), for example, on a mobile 'phone but will increase width to span 8 columns on a medium viewport and larger.
-The second element has the class, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
+The second element has the classes, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
 The middle row has 3 elements.
@@ Line 32: / Line 32: @@
 The bottom row has 2 elements.
-Both the elements have the class, '''col-6'''. They will span 6 columns on every viewport.
+Both the elements have the classes, '''col-6'''. They will span 6 columns on every viewport.

@@ Line 24: / Line 24: @@
 The first element has the class, '''col-md-8'''. This will default to full width (spanning 12 columns) on viewports smaller than medium (md), for example, on a mobile 'phone but will increase width to span 8 columns on a medium viewport and larger.
-The second element has the classes, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
+The second element has the class, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
 The middle row has 3 elements.
-All 3 elements have the classes, '''col-6 col-md-4'''. They will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
+All 3 elements have the class, '''col-6 col-md-4'''. They will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
 The bottom row has 2 elements.

@@ Line 24: / Line 24: @@
 The first element has the class, '''col-md-8'''. This will default to full width (spanning 12 columns) on viewports smaller than medium (md), for example, on a mobile 'phone but will increase width to span 8 columns on a medium viewport and larger.
-The second element has the class, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
+The second element has the classes, '''col-6 col-md-4'''. This will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
 The middle row has 3 elements.
-All 3 elements have the class, '''col-6 col-md-4'''. They will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
+All 3 elements have the classes, '''col-6 col-md-4'''. They will span 6 columns on viewports smaller than medium (md) but will decrease width to span 4 columns on a medium viewport and larger.
 The bottom row has 2 elements.

@@ Line 6: / Line 6: @@
 Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.
-Within each container, every row has twelve columns.
+Within each container, each row has twelve columns.
 Each column can be made to behave differently according the size of the viewport of the device being used to view the page, that is, it is 'responsive'.

@@ Line 15: / Line 15: @@
-Here is a container with 3 rows.
+Here is a container with 3 rows as it would display on a larger viewport.
 [[Image:Bootstrap Grid.png|800px]]
@@ Line 22: / Line 22: @@
 The top row has 2 elements.
-The first has the class, '''col-md-8'''
+The first element has the class, '''col-md-8'''. This will default to full width (spanning 12 columns) on viewports smaller than medium (md), for example, on a mobile 'phone but will increase width to span 8 columns on a medium viewport and larger.
 <hr>
 {{Contribute}}