I recently incorporated a Bootstrap panel above a search results table - my first experience working with Panels. This panel contains a form with a select menu, allowing users to filter the list of search results based on their selections.
Currently, the panel and select menu are both too wide, spanning the full width of the table. I am looking to reduce the Panel's width by approximately 1/3 and center it on the page, but I'm unsure if this is achievable or how to go about it.
Here is the HTML code for reference:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">First</a></li>
<li class="disabled"><a href="#">Previous</a></li>
<li><a href="?action=searchAssets&prNumber=&assetTag=&serialNumber=&assetID=AT&skip=20">Next</a></li>
<li><a href="?action=searchAssets&prNumber=&assetTag=&serialNumber=&assetID=AT&skip=13220">Last</a></li>
</ul>
</div>
<div class="text-center">
<span class="counter-items"><span class="counter-num-items">1-20 / 13233</span></span>
</div>
<h1>Search Results</h1>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Filter By</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="filter" action="filter.php" method="get" role="form">
<input type="hidden" name="action" value="filterSearch">
<div class="form-group">
<div class="col-sm-9">
<select class="form-control" name="productType" id="productType">
<option selected="selected">By Product Type</option>
<option value="Cars">Cars</option>
<option value="Trains">Trains</option>
<option value="Planes">Planes</option>
</select>
</div>
</div>
</form>
</div>
</div>