Skip to content

Commit f9bee7d

Browse files
mdomdo
committed
fixes twbs#16902: remove the .container-fluid from the grid system in modal example since it's doubling up padding
1 parent cf2d9bf commit f9bee7d

File tree

1 file changed

+41
-45
lines changed

1 file changed

+41
-45
lines changed

‎docs/_includes/js/modal.html‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ <h2 id="modals-remove-animation">Remove animation</h2>
219219
{% endhighlight %}
220220

221221
<h2 id="modals-grid-system">Using the grid system</h2>
222-
<p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p>
222+
<p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.row</code>s within the <code>.modal-body</code> and then use the normal grid system classes.</p>
223223
<!-- sample modal content -->
224224
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel">
225225
<div class="modal-dialog" role="document">
@@ -229,28 +229,26 @@ <h2 id="modals-grid-system">Using the grid system</h2>
229229
<h4 class="modal-title" id="gridModalLabel">Modal title</h4>
230230
</div>
231231
<div class="modal-body">
232-
<div class="container-fluid">
233-
<div class="row">
234-
<div class="col-md-4">.col-md-4</div>
235-
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
236-
</div>
237-
<div class="row">
238-
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
239-
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
240-
</div>
241-
<div class="row">
242-
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
243-
</div>
244-
<div class="row">
245-
<div class="col-sm-9">
246-
Level 1: .col-sm-9
247-
<div class="row">
248-
<div class="col-xs-8 col-sm-6">
249-
Level 2: .col-xs-8 .col-sm-6
250-
</div>
251-
<div class="col-xs-4 col-sm-6">
252-
Level 2: .col-xs-4 .col-sm-6
253-
</div>
232+
<div class="row">
233+
<div class="col-md-4">.col-md-4</div>
234+
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
235+
</div>
236+
<div class="row">
237+
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
238+
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
239+
</div>
240+
<div class="row">
241+
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
242+
</div>
243+
<div class="row">
244+
<div class="col-sm-9">
245+
Level 1: .col-sm-9
246+
<div class="row">
247+
<div class="col-xs-8 col-sm-6">
248+
Level 2: .col-xs-8 .col-sm-6
249+
</div>
250+
<div class="col-xs-4 col-sm-6">
251+
Level 2: .col-xs-4 .col-sm-6
254252
</div>
255253
</div>
256254
</div>
@@ -277,28 +275,26 @@ <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
277275
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
278276
</div>
279277
<div class="modal-body">
280-
<div class="container-fluid">
281-
<div class="row">
282-
<div class="col-md-4">.col-md-4</div>
283-
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
284-
</div>
285-
<div class="row">
286-
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
287-
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
288-
</div>
289-
<div class="row">
290-
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
291-
</div>
292-
<div class="row">
293-
<div class="col-sm-9">
294-
Level 1: .col-sm-9
295-
<div class="row">
296-
<div class="col-xs-8 col-sm-6">
297-
Level 2: .col-xs-8 .col-sm-6
298-
</div>
299-
<div class="col-xs-4 col-sm-6">
300-
Level 2: .col-xs-4 .col-sm-6
301-
</div>
278+
<div class="row">
279+
<div class="col-md-4">.col-md-4</div>
280+
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
281+
</div>
282+
<div class="row">
283+
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
284+
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
285+
</div>
286+
<div class="row">
287+
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
288+
</div>
289+
<div class="row">
290+
<div class="col-sm-9">
291+
Level 1: .col-sm-9
292+
<div class="row">
293+
<div class="col-xs-8 col-sm-6">
294+
Level 2: .col-xs-8 .col-sm-6
295+
</div>
296+
<div class="col-xs-4 col-sm-6">
297+
Level 2: .col-xs-4 .col-sm-6
302298
</div>
303299
</div>
304300
</div>

0 commit comments

Comments
 (0)