Bootstrap 3 - space around panel - html

Question

I have created a form inside a Panel in bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<form>
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
When I run it, the panel spans from the far left to the far right. How can I get some spacing on the left and right so that panel boundary can be easily distinguished from the browser boundary.

Answer 1

Just wrap your panel within a container-fluid class
example snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
With custom css--
.wrapper {
margin-left: 2%;
margin-right: 2%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form>
<div class="wrapper">
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>

Answer 2

Just add some margin to the .panel
.panel { margin-left: 10px; margin-right: 10px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<form>
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>