CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user982124
user982124

Reputation: 4610

Bootstrap - Position Panel in centre of page and reduce width

I have just added a Bootstrap panel which sits above a table of search results - this is my first time working with Panels. The panel includes a form with a select menu - the idea is that users can make selections which will filter the list of search results.

At the moment the panel has the same width as the table and the select menu is also very wide - I would like to reduce the width of the Panel by around 1/3 and have it centred on the page but not sure if this is possible or how to do this.

Here's my HTML for this:

<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>

Upvotes: 0

Views: 2193

Answers (3)

JPil
JPil

Reputation: 301

Place your panel inside a div tag with class="col-xs-offset-3 col-xs-6". find below

 <div class=" col-xs-offset-3 col-xs-6">
    <div class="panel panel-primary">
         ----
    </div>
 <div>

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 269

Seems like you don't want to use Column Layout in your code. All though, it is possible to reduce the width of the panel and place it to the center of the page. You can override bootstrap's default CSS style for Panel. Try to add below code to your HTML file under <head> section:

<style>
  #panel-center{
    width: 20%;
    margin: 0 auto;
    }
</style>

Add id = "panel-center" to this line <div class="panel panel-primary">

This would solve your problem, but it is not optimum solution. I would suggest to use Column Layout(Grid). Thank you.

Upvotes: 0

Rafael Gallardo
Rafael Gallardo

Reputation: 143

If I am correctly understanding you want to center and reduce width of your panel to 1/3.

So you should put an id (panel1) to the panel and add css

<div id ="panel1" class="panel panel-primary">

<style>
  #panel1 {
    width:30%; 
    height:auto;
    margin:0 auto;
    text-align:center;
  }
</style>

Upvotes: 0

Related Questions