havoc/sizif_web_public.git

Samo Penic

2019-02-20 83c3f647c35477564b77cbc5b36d37d793d5442a

commit \| author \| age
83c3f6	1	---
SP	2	layout: docs
	3	title: Grid system
	4	description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
	5	group: layout
	6	toc: true
	7	---
	8
	9	## How it works
	10
	11	Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
	12
	13	New to or unfamiliar with flexbox? [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
	14
	15	<div class="bd-example-row">
	16	{% capture example %}
	17	<div class="container">
	18	<div class="row">
	19	<div class="col-sm">
	20	One of three columns
	21	</div>
	22	<div class="col-sm">
	23	One of three columns
	24	</div>
	25	<div class="col-sm">
	26	One of three columns
	27	</div>
	28	</div>
	29	</div>
	30	{% endcapture %}
	31	{% include example.html content=example %}
	32	</div>
	33
	34	The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
	35
	36	Breaking it down, here's how it works:
	37
	38	- Containers provide a means to center and horizontally pad your site's contents. Use `.container` for a responsive pixel width or `.container-fluid` for `width: 100%` across all viewport and device sizes.
	39	- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
	40	- In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
	41	- Thanks to flexbox, grid columns without a specified `width` will automatically layout as equal width columns. For example, four instances of `.col-sm` will each automatically be 25% wide from the small breakpoint and up. See the [auto-layout columns](#auto-layout-columns) section for more examples.
	42	- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use `.col-4`.
	43	- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element.
	44	- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`.
	45	- To make the grid responsive, there are five grid breakpoints, one for each [responsive breakpoint]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large.
	46	- Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices, but not the first `xs` breakpoint).
	47	- You can use predefined grid classes (like `.col-4`) or [Sass mixins](#sass-mixins) for more semantic markup.
	48
	49	Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
	50
	51	## Grid options
	52
	53	While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
	54
	55	See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
	56
	57	<table class="table table-bordered table-striped">
	58	<thead>
	59	<tr>
	60	<th></th>
	61	<th class="text-center">
	62	Extra small<br>
	63	<small><576px</small>
	64	</th>
	65	<th class="text-center">
	66	Small<br>
	67	<small>≥576px</small>
	68	</th>
	69	<th class="text-center">
	70	Medium<br>
	71	<small>≥768px</small>
	72	</th>
	73	<th class="text-center">
	74	Large<br>
	75	<small>≥992px</small>
	76	</th>
	77	<th class="text-center">
	78	Extra large<br>
	79	<small>≥1200px</small>
	80	</th>
	81	</tr>
	82	</thead>
	83	<tbody>
	84	<tr>
	85	<th class="text-nowrap" scope="row">Max container width</th>
	86	<td>None (auto)</td>
	87	<td>540px</td>
	88	<td>720px</td>
	89	<td>960px</td>
	90	<td>1140px</td>
	91	</tr>
	92	<tr>
	93	<th class="text-nowrap" scope="row">Class prefix</th>
	94	<td><code>.col-</code></td>
	95	<td><code>.col-sm-</code></td>
	96	<td><code>.col-md-</code></td>
	97	<td><code>.col-lg-</code></td>
	98	<td><code>.col-xl-</code></td>
	99	</tr>
	100	<tr>
	101	<th class="text-nowrap" scope="row"># of columns</th>
	102	<td colspan="5">12</td>
	103	</tr>
	104	<tr>
	105	<th class="text-nowrap" scope="row">Gutter width</th>
	106	<td colspan="5">30px (15px on each side of a column)</td>
	107	</tr>
	108	<tr>
	109	<th class="text-nowrap" scope="row">Nestable</th>
	110	<td colspan="5">Yes</td>
	111	</tr>
	112	<tr>
	113	<th class="text-nowrap" scope="row">Column ordering</th>
	114	<td colspan="5">Yes</td>
	115	</tr>
	116	</tbody>
	117	</table>
	118
	119	## Auto-layout columns
	120
	121	Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
	122
	123	### Equal-width
	124
	125	For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
	126
	127	<div class="bd-example-row">
	128	{% capture example %}
	129	<div class="container">
	130	<div class="row">
	131	<div class="col">
	132	1 of 2
	133	</div>
	134	<div class="col">
	135	2 of 2
	136	</div>
	137	</div>
	138	<div class="row">
	139	<div class="col">
	140	1 of 3
	141	</div>
	142	<div class="col">
	143	2 of 3
	144	</div>
	145	<div class="col">
	146	3 of 3
	147	</div>
	148	</div>
	149	</div>
	150	{% endcapture %}
	151	{% include example.html content=example %}
	152	</div>
	153
	154	Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
	155
	156	<div class="bd-example-row">
	157	{% capture example %}
	158	<div class="container">
	159	<div class="row">
	160	<div class="col">Column</div>
	161	<div class="col">Column</div>
	162	<div class="w-100"></div>
	163	<div class="col">Column</div>
	164	<div class="col">Column</div>
	165	</div>
	166	</div>
	167	{% endcapture %}
	168	{% include example.html content=example %}
	169	</div>
	170
	171	### Setting one column width
	172
	173	Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
	174
	175	<div class="bd-example-row">
	176	{% capture example %}
	177	<div class="container">
	178	<div class="row">
	179	<div class="col">
	180	1 of 3
	181	</div>
	182	<div class="col-6">
	183	2 of 3 (wider)
	184	</div>
	185	<div class="col">
	186	3 of 3
	187	</div>
	188	</div>
	189	<div class="row">
	190	<div class="col">
	191	1 of 3
	192	</div>
	193	<div class="col-5">
	194	2 of 3 (wider)
	195	</div>
	196	<div class="col">
	197	3 of 3
	198	</div>
	199	</div>
	200	</div>
	201	{% endcapture %}
	202	{% include example.html content=example %}
	203	</div>
	204
	205	### Variable width content
	206
	207	Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
	208
	209	<div class="bd-example-row">
	210	{% capture example %}
	211	<div class="container">
	212	<div class="row justify-content-md-center">
	213	<div class="col col-lg-2">
	214	1 of 3
	215	</div>
	216	<div class="col-md-auto">
	217	Variable width content
	218	</div>
	219	<div class="col col-lg-2">
	220	3 of 3
	221	</div>
	222	</div>
	223	<div class="row">
	224	<div class="col">
	225	1 of 3
	226	</div>
	227	<div class="col-md-auto">
	228	Variable width content
	229	</div>
	230	<div class="col col-lg-2">
	231	3 of 3
	232	</div>
	233	</div>
	234	</div>
	235	{% endcapture %}
	236	{% include example.html content=example %}
	237	</div>
	238
	239	### Equal-width multi-row
	240
	241	Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
	242
	243	<div class="bd-example-row">
	244	{% capture example %}
	245	<div class="container">
	246	<div class="row">
	247	<div class="col">col</div>
	248	<div class="col">col</div>
	249	<div class="w-100"></div>
	250	<div class="col">col</div>
	251	<div class="col">col</div>
	252	</div>
	253	</div>
	254	{% endcapture %}
	255	{% include example.html content=example %}
	256	</div>
	257
	258	## Responsive classes
	259
	260	Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
	261
	262	### All breakpoints
	263
	264	For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
	265
	266	<div class="bd-example-row">
	267	{% capture example %}
	268	<div class="container">
	269	<div class="row">
	270	<div class="col">col</div>
	271	<div class="col">col</div>
	272	<div class="col">col</div>
	273	<div class="col">col</div>
	274	</div>
	275	<div class="row">
	276	<div class="col-8">col-8</div>
	277	<div class="col-4">col-4</div>
	278	</div>
	279	</div>
	280	{% endcapture %}
	281	{% include example.html content=example %}
	282	</div>
	283
	284	### Stacked to horizontal
	285
	286	Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
	287
	288	<div class="bd-example-row">
	289	{% capture example %}
	290	<div class="container">
	291	<div class="row">
	292	<div class="col-sm-8">col-sm-8</div>
	293	<div class="col-sm-4">col-sm-4</div>
	294	</div>
	295	<div class="row">
	296	<div class="col-sm">col-sm</div>
	297	<div class="col-sm">col-sm</div>
	298	<div class="col-sm">col-sm</div>
	299	</div>
	300	</div>
	301	{% endcapture %}
	302	{% include example.html content=example %}
	303	</div>
	304
	305	### Mix and match
	306
	307	Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
	308
	309	<div class="bd-example-row">
	310	{% capture example %}
	311	<div class="container">
	312	<!-- Stack the columns on mobile by making one full-width and the other half-width -->
	313	<div class="row">
	314	<div class="col-12 col-md-8">.col-12 .col-md-8</div>
	315	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	316	</div>
	317
	318	<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
	319	<div class="row">
	320	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	321	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	322	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	323	</div>
	324
	325	<!-- Columns are always 50% wide, on mobile and desktop -->
	326	<div class="row">
	327	<div class="col-6">.col-6</div>
	328	<div class="col-6">.col-6</div>
	329	</div>
	330	</div>
	331	{% endcapture %}
	332	{% include example.html content=example %}
	333	</div>
	334
	335	### Gutters
	336
	337	Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s. The `.container` or `.container-fluid` parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.
	338
	339	Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5`, counteracted that with `.mx-lg-n5` on the parent `.row` and then adjusted the `.container` wrapper with `.px-lg-5`.
	340
	341	{% capture example %}
	342	<div class="container px-lg-5">
	343	<div class="row mx-lg-n5">
	344	<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
	345	<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
	346	</div>
	347	</div>
	348	{% endcapture %}
	349	{% include example.html content=example %}
	350
	351	## Alignment
	352
	353	Use flexbox alignment utilities to vertically and horizontally align columns.
	354
	355	### Vertical alignment
	356
	357	<div class="bd-example-row bd-example-row-flex-cols">
	358	{% capture example %}
	359	<div class="container">
	360	<div class="row align-items-start">
	361	<div class="col">
	362	One of three columns
	363	</div>
	364	<div class="col">
	365	One of three columns
	366	</div>
	367	<div class="col">
	368	One of three columns
	369	</div>
	370	</div>
	371	<div class="row align-items-center">
	372	<div class="col">
	373	One of three columns
	374	</div>
	375	<div class="col">
	376	One of three columns
	377	</div>
	378	<div class="col">
	379	One of three columns
	380	</div>
	381	</div>
	382	<div class="row align-items-end">
	383	<div class="col">
	384	One of three columns
	385	</div>
	386	<div class="col">
	387	One of three columns
	388	</div>
	389	<div class="col">
	390	One of three columns
	391	</div>
	392	</div>
	393	</div>
	394	{% endcapture %}
	395	{% include example.html content=example %}
	396	</div>
	397
	398	<div class="bd-example-row bd-example-row-flex-cols">
	399	{% capture example %}
	400	<div class="container">
	401	<div class="row">
	402	<div class="col align-self-start">
	403	One of three columns
	404	</div>
	405	<div class="col align-self-center">
	406	One of three columns
	407	</div>
	408	<div class="col align-self-end">
	409	One of three columns
	410	</div>
	411	</div>
	412	</div>
	413	{% endcapture %}
	414	{% include example.html content=example %}
	415	</div>
	416
	417	### Horizontal alignment
	418
	419	<div class="bd-example-row">
	420	{% capture example %}
	421	<div class="container">
	422	<div class="row justify-content-start">
	423	<div class="col-4">
	424	One of two columns
	425	</div>
	426	<div class="col-4">
	427	One of two columns
	428	</div>
	429	</div>
	430	<div class="row justify-content-center">
	431	<div class="col-4">
	432	One of two columns
	433	</div>
	434	<div class="col-4">
	435	One of two columns
	436	</div>
	437	</div>
	438	<div class="row justify-content-end">
	439	<div class="col-4">
	440	One of two columns
	441	</div>
	442	<div class="col-4">
	443	One of two columns
	444	</div>
	445	</div>
	446	<div class="row justify-content-around">
	447	<div class="col-4">
	448	One of two columns
	449	</div>
	450	<div class="col-4">
	451	One of two columns
	452	</div>
	453	</div>
	454	<div class="row justify-content-between">
	455	<div class="col-4">
	456	One of two columns
	457	</div>
	458	<div class="col-4">
	459	One of two columns
	460	</div>
	461	</div>
	462	</div>
	463	{% endcapture %}
	464	{% include example.html content=example %}
	465	</div>
	466
	467	### No gutters
	468
	469	The gutters between columns in our predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
	470
	471	Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/).
	472
	473	Need an edge-to-edge design? Drop the parent `.container` or `.container-fluid`.
	474
	475	{% highlight sass %}
	476	.no-gutters {
	477	margin-right: 0;
	478	margin-left: 0;
	479
	480	> .col,
	481	> [class*="col-"] {
	482	padding-right: 0;
	483	padding-left: 0;
	484	}
	485	}
	486	{% endhighlight %}
	487
	488	In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
	489
	490	<div class="bd-example-row">
	491	{% capture example %}
	492	<div class="row no-gutters">
	493	<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
	494	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	495	</div>
	496	{% endcapture %}
	497	{% include example.html content=example %}
	498	</div>
	499
	500	### Column wrapping
	501
	502	If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
	503
	504	<div class="bd-example-row">
	505	{% capture example %}
	506	<div class="container">
	507	<div class="row">
	508	<div class="col-9">.col-9</div>
	509	<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
	510	<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
	511	</div>
	512	</div>
	513	{% endcapture %}
	514	{% include example.html content=example %}
	515	</div>
	516
	517	### Column breaks
	518
	519	Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
	520
	521	<div class="bd-example-row">
	522	{% capture example %}
	523	<div class="container">
	524	<div class="row">
	525	<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
	526	<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
	527
	528	<!-- Force next columns to break to new line -->
	529	<div class="w-100"></div>
	530
	531	<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
	532	<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
	533	</div>
	534	</div>
	535	{% endcapture %}
	536	{% include example.html content=example %}
	537	</div>
	538
	539	You may also apply this break at specific breakpoints with our [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
	540
	541	<div class="bd-example-row">
	542	{% capture example %}
	543	<div class="container">
	544	<div class="row">
	545	<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
	546	<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
	547
	548	<!-- Force next columns to break to new line at md breakpoint and up -->
	549	<div class="w-100 d-none d-md-block"></div>
	550
	551	<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
	552	<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
	553	</div>
	554	</div>
	555	{% endcapture %}
	556	{% include example.html content=example %}
	557	</div>
	558
	559	## Reordering
	560
	561	### Order classes
	562
	563	Use `.order-` classes for controlling the visual order of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
	564
	565	<div class="bd-example-row">
	566	{% capture example %}
	567	<div class="container">
	568	<div class="row">
	569	<div class="col">
	570	First, but unordered
	571	</div>
	572	<div class="col order-12">
	573	Second, but last
	574	</div>
	575	<div class="col order-1">
	576	Third, but first
	577	</div>
	578	</div>
	579	</div>
	580	{% endcapture %}
	581	{% include example.html content=example %}
	582	</div>
	583
	584	There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
	585
	586	<div class="bd-example-row">
	587	{% capture example %}
	588	<div class="container">
	589	<div class="row">
	590	<div class="col order-last">
	591	First, but last
	592	</div>
	593	<div class="col">
	594	Second, but unordered
	595	</div>
	596	<div class="col order-first">
	597	Third, but first
	598	</div>
	599	</div>
	600	</div>
	601	{% endcapture %}
	602	{% include example.html content=example %}
	603	</div>
	604
	605	### Offsetting columns
	606
	607	You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
	608
	609	#### Offset classes
	610
	611	Move columns to the right using `.offset-md-` classes. These classes increase the left margin of a column by `` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
	612
	613	<div class="bd-example-row">
	614	{% capture example %}
	615	<div class="container">
	616	<div class="row">
	617	<div class="col-md-4">.col-md-4</div>
	618	<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
	619	</div>
	620	<div class="row">
	621	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
	622	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
	623	</div>
	624	<div class="row">
	625	<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
	626	</div>
	627	</div>
	628	{% endcapture %}
	629	{% include example.html content=example %}
	630	</div>
	631
	632	In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/).
	633
	634	<div class="bd-example-row">
	635	{% capture example %}
	636	<div class="container">
	637	<div class="row">
	638	<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
	639	<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
	640	</div>
	641	<div class="row">
	642	<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
	643	<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
	644	</div>
	645	</div>
	646	{% endcapture %}
	647	{% include example.html content=example %}
	648	</div>
	649
	650	#### Margin utilities
	651
	652	With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
	653
	654	<div class="bd-example-row">
	655	{% capture example %}
	656	<div class="container">
	657	<div class="row">
	658	<div class="col-md-4">.col-md-4</div>
	659	<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
	660	</div>
	661	<div class="row">
	662	<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
	663	<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
	664	</div>
	665	<div class="row">
	666	<div class="col-auto mr-auto">.col-auto .mr-auto</div>
	667	<div class="col-auto">.col-auto</div>
	668	</div>
	669	</div>
	670	{% endcapture %}
	671	{% include example.html content=example %}
	672	</div>
	673
	674	## Nesting
	675
	676	To nest your content with the default grid, add a new `.row` and set of `.col-sm-` columns within an existing `.col-sm-` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
	677
	678	<div class="bd-example-row">
	679	{% capture example %}
	680	<div class="container">
	681	<div class="row">
	682	<div class="col-sm-9">
	683	Level 1: .col-sm-9
	684	<div class="row">
	685	<div class="col-8 col-sm-6">
	686	Level 2: .col-8 .col-sm-6
	687	</div>
	688	<div class="col-4 col-sm-6">
	689	Level 2: .col-4 .col-sm-6
	690	</div>
	691	</div>
	692	</div>
	693	</div>
	694	</div>
	695	{% endcapture %}
	696	{% include example.html content=example %}
	697	</div>
	698
	699	## Sass mixins
	700
	701	When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
	702
	703	### Variables
	704
	705	Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
	706
	707	{% highlight scss %}
	708	$grid-columns: 12;
	709	$grid-gutter-width: 30px;
	710
	711	$grid-breakpoints: (
	712	// Extra small screen / phone
	713	xs: 0,
	714	// Small screen / phone
	715	sm: 576px,
	716	// Medium screen / tablet
	717	md: 768px,
	718	// Large screen / desktop
	719	lg: 992px,
	720	// Extra large screen / wide desktop
	721	xl: 1200px
	722	);
	723
	724	$container-max-widths: (
	725	sm: 540px,
	726	md: 720px,
	727	lg: 960px,
	728	xl: 1140px
	729	);
	730	{% endhighlight %}
	731
	732	### Mixins
	733
	734	Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
	735
	736	{% highlight scss %}
	737	// Creates a wrapper for a series of columns
	738	@include make-row();
	739
	740	// Make the element grid-ready (applying everything but the width)
	741	@include make-col-ready();
	742	@include make-col($size, $columns: $grid-columns);
	743
	744	// Get fancy by offsetting, or changing the sort order
	745	@include make-col-offset($size, $columns: $grid-columns);
	746	{% endhighlight %}
	747
	748	### Example usage
	749
	750	You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
	751
	752	{% highlight scss %}
	753	.example-container {
	754	width: 800px;
	755	@include make-container();
	756	}
	757
	758	.example-row {
	759	@include make-row();
	760	}
	761
	762	.example-content-main {
	763	@include make-col-ready();
	764
	765	@include media-breakpoint-up(sm) {
	766	@include make-col(6);
	767	}
	768	@include media-breakpoint-up(lg) {
	769	@include make-col(8);
	770	}
	771	}
	772
	773	.example-content-secondary {
	774	@include make-col-ready();
	775
	776	@include media-breakpoint-up(sm) {
	777	@include make-col(6);
	778	}
	779	@include media-breakpoint-up(lg) {
	780	@include make-col(4);
	781	}
	782	}
	783	{% endhighlight %}
	784
	785	{% capture example %}
	786	<div class="example-container">
	787	<div class="example-row">
	788	<div class="example-content-main">Main content</div>
	789	<div class="example-content-secondary">Secondary content</div>
	790	</div>
	791	</div>
	792	{% endcapture %}
	793	{% include example.html content=example %}
	794
	795	## Customizing the grid
	796
	797	Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
	798
	799	### Columns and gutters
	800
	801	The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.
	802
	803	{% highlight scss %}
	804	$grid-columns: 12 !default;
	805	$grid-gutter-width: 30px !default;
	806	{% endhighlight %}
	807
	808	### Grid tiers
	809
	810	Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
	811
	812	{% highlight scss %}
	813	$grid-breakpoints: (
	814	xs: 0,
	815	sm: 480px,
	816	md: 768px,
	817	lg: 1024px
	818	);
	819
	820	$container-max-widths: (
	821	sm: 420px,
	822	md: 720px,
	823	lg: 960px
	824	);
	825	{% endhighlight %}
	826
	827	When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).