Bootstrap grid - Revision history

Karl Jones: /* External links */

2016-04-22T00:52:08Z

‎External links

2016-02-17T00:41:06Z

‎Columns

2016-02-17T00:40:23Z

‎Columns

2016-02-17T00:34:37Z

‎Display sizes

2016-02-17T00:34:13Z

‎Display sizes

2016-02-16T23:30:10Z

‎Columns

2016-02-16T23:28:13Z

‎Containers

2016-02-16T23:26:55Z

‎Rows

2016-02-16T15:15:10Z

‎Bootstrap grid design principles

2016-02-16T15:13:28Z

‎Examples

← Older revision		Revision as of 00:52, 22 April 2016
Line 193:		Line 193:
	* [http://code.karljones.com/docs/bootstrap/Bootstrap-Grid.pdf Bootstrap grid] (PDF) @ code.karljones.com		* [http://code.karljones.com/docs/bootstrap/Bootstrap-Grid.pdf Bootstrap grid] (PDF) @ code.karljones.com
	* [http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp Bootstrap grid] @ w3schools.com		* [http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp Bootstrap grid] @ w3schools.com
		+
		+	[[Category:Bootstrap (framework)]]

@@ Line 134: / Line 134: @@
   <div class="row">
-   <div class="col-sm-6">This is column one row 2</div>
+   <div class="col-sm-8">This is column one row 2</div>
-   <div class="col-sm-6">This is column two row 2</div>
+   <div class="col-sm-4">This is column two row 2</div>
   </div>

← Older revision		Revision as of 00:40, 17 February 2016
Line 123:		Line 123:

	The above example demonstrates two columns of equal width (six units each).		The above example demonstrates two columns of equal width (six units each).
		+
		+	Full example, two rows:
		+
		+	<pre>
		+	<div class="container">
		+	<div class="row">
		+	<div class="col-sm-6">This is column one</div>
		+	<div class="col-sm-6">This is column two</div>
		+	</div>
		+
		+	<div class="row">
		+	<div class="col-sm-6">This is column one row 2</div>
		+	<div class="col-sm-6">This is column two row 2</div>
		+	</div>
		+
		+	</div>
		+	</pre>

	=== Content ===		=== Content ===

@@ Line 42: / Line 42: @@
 * [[Tablet]] = sm
 * [[Laptop]] / Desktop = md
-* Wide desktop =lg
+* Wide desktop = lg
 == Grid System Rules ==

@@ Line 39: / Line 39: @@
 The Bootstrap grid provides for four different device display sizes:
-* [[Mobile phone]]
+* [[Mobile phone]] = xs
-* [[Tablet]]
+* [[Tablet]] = sm
-* [[Laptop]] / Desktop
+* [[Laptop]] / Desktop = md
-* Wide desktop
+* Wide desktop =lg
 == Grid System Rules ==

@@ Line 111: / Line 111: @@
 * <code>.col-lg-*</code> = Large Devices Large Desktops 1200px and Up
-Example:
+Full example:
 === Content ===

@@ Line 54: / Line 54: @@
 Assign the class to one or more [[HTML element|HTML elements]] on the page:
-Simple example with one container:
+Simple example with one fixed-width container:
 <pre>
 <body>
 <div class="container">
-   <!-- page content goes here ... -->
+   <!-- Bootstrap rows and columns go here  -->
 </div>
 </body>

← Older revision		Revision as of 15:15, 16 February 2016
Line 104:		Line 104:

	Put your content (text, images, etc.) inside the columns.		Put your content (text, images, etc.) inside the columns.
		+
		+	== Nested grids ==
		+
		+	Bootstrap 3 supports nested grids -- that is, a set of rows and columns nested inside other rows and columns.
		+
		+	To create a nested grid, first create a basic grid, with a row and two or more columns.
		+
		+	Then, inside one of the columns, create another row, containing two or more columns.

	== Bootstrap grid design principles ==		== Bootstrap grid design principles ==

@@ Line 105: / Line 105: @@
 Put your content (text, images, etc.) inside the columns.
-== Examples ==
+== Bootstrap grid design principles ==
-Coming soon.
+Key principles to keep in mind:
 == See also ==