Menu
I'm trying to work with the Bootstrap 3 grid system and I'm running in to issues / confusion when using it with Modals.
Basically what I see is when I add rows to the modal body the content often spills out of the modal body. So what is the best way to make the modal body have its own "container" so it has its own grid. I'm already using .container on the main part of my page and I've read you should not nest .container or .container-fluid.
What I'm looking for are some best practices or an explanation for why I'm seeing some unexpected rendering.
Should I do this:
<div class="modal-body row">
...
</div>
or this:
<div class="modal-body">
<div class="row">
....
</div>
</div>
or this:
<div class="modal-body">
<div class="col-xs-12">
....
</div>
</div>
Here's a contrived example: (http://plnkr.co/edit/5vOppLmuRBqH3RAHfynT)
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<header class="container">
<div class="row">
<h1 class="text-center">This is the Header</h1>
</div>
<p class="col-xs-3">Header Info Right</p>
<p class="col-xs-9">Header Info Left</p>
</header>
<section class="container">
<div class="row">
<div class="col-xs-3">
<ul>
<li>Col1</li>
<li>Col1</li>
</ul>
<div class="row">
<div class="col-xs-2 col-xs-offset-4">
<button type="button" class="btn btn-primary btn-sm pull-left" data-toggle="modal" data-target="#modal1">
<span class="glyphicon glyphicon-new-window"></span>
</button>
<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-xs-12">
<hr/>
<hr/>
<div class="row">
<h1 class="text-center">Modal for Col 1</h1>
</div>
<hr/>
<div class="row">
<div class="col-xs-3">
<ul>
<li>Modal Col1</li>
<li>Modal Col1</li>
</ul>
</div>
<div class="col-xs-6">
<ul>
<li>Modal Col2</li>
<li>Modal Col2</li>
</ul>
</div>
<div class="col-xs-3">
<div class="row">
<ul>
<li>Modal Col3</li>
<li>Modal Col3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<ul>
<li>Col2</li>
<li>Col2</li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>Col3</li>
<li>Col3</li>
</ul>
</div>
</div>
</section>
<footer class="container">
<div class="row">
<hr/>
<p class="col-xs-6">Footer Info Right</p>
<p class="col-xs-6">Footer Info Left</p>
</div>
</footer>
</body>
</html>
248
I think inside the modal-body you should have a container-fluid > row > col-*
<div class="modal-body">
<div class="container-fluid">
<div class="row">
(columns and more nested row/cols here)
</div><!--/row-->
</div><!--/container-fluid-->
</div><!--/modal-body-->
Demo: http://bootply.com/sQbChOGPkS
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
