Center the panel on the page and decrease its width using Bootstrap

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>

Answer №1

To properly display your panel, make sure to enclose it within a div element with the following classes: col-xs-offset-3 col-xs-6. See example below:

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

Answer №2

It seems like you're looking to center and reduce the width of your panel to one-third.

To achieve this, you can assign an id (panel1) to the panel and apply the following CSS:

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

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

Answer №3

It appears that you are hesitant to utilize the Column Layout feature in your code. However, there is a way to adjust the width of the panel and position it at the center of the page without using it. You can customize the CSS style for the Panel by overriding bootstrap's default settings. Simply insert the following code into the <head> section of your HTML file:

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

Make sure to add the id "panel-center" to this line

<div class="panel panel-primary">

While this solution may resolve your issue, it is not considered an optimized approach. I recommend utilizing the Column Layout(Grid) for better results. Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hover Effects for CSS Info Boxes

I have a code snippet below for an info box I am working on. How can I adjust it so that when I hover over it, the green background fills the entire height instead of just 3/4 of the height? Any guidance on what may be causing this issue would be greatly ...

Generating dynamic XElements within an XDocument through iteration

Is there a way to dynamically generate 'n' number of XElements within an XDocument using a loop, based on the number of files found in a directory? The code for my work-in-progress project is quite lengthy to include here, so I have uploaded it ...

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

Steps to create a clickable drop-down arrow with a label

I've designed a vertical navigation accordion menu that allows users to hover and click on any title (label) to expand a sub-menu. However, I'm facing an issue where my drop-down arrow is not clickable, unlike the rest of the label which works f ...

Are the connections from a single array unique?

A generous user shared this code with me: $singles = valley_images(); $groups = valley_group_images(); $images = array_merge($singles, $groups); $sortArray = array(); foreach($images as $image){ foreach($image as $key=>$value){ if(!iss ...

What is the best way to switch the direction of the arrows based on the sorting order?

Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here? sortingPipe.ts: import { SprBitType } from '../spr-bit-type/sprBitType'; import { Pipe, PipeTransform } from '@angular/core& ...

How can I obtain the current state of HTML checkboxes from a local JSON file?

I have an HTML table with checkboxes, and I want to save the state of each checkbox in a local .JSON file instead of using localStorage. When the page reloads, I want it to automatically load the saved JSON file to retrieve the previously configured checkb ...

Developing HTML5 animation by utilizing sprite sheets

Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...

What could be causing the event listener to not be triggered?

I'm having an issue with a simple code that is supposed to display an alert box when a hyperlink is clicked, but it's not working. I believe the script is not being called. Can someone help me figure out what's wrong? Here is the HTML code: ...

Creating an organized layout with multiple bootstrap toasts in a grid formation

Is there a way to create multiple Bootstrap Toast elements side-by-side and top-to-top? For more information, visit: https://getbootstrap.com/docs/4.2/components/toasts/ <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: ...

When the button/link is clicked, I must dynamically create a modal popup that includes a user control

I am currently working on improving an asp.net web forms website by incorporating popup modals to display the rental rates for available equipment. The challenge arises when dealing with pages where each piece of equipment has different rates, requiring a ...

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

Design the header and body of the table in a visually appealing format

$("input:checkbox:not(:checked)").each(function() { var column = "table ." + $(this).attr("name"); $(column).hide(); }); $("input:checkbox").click(function() { var column = "table ." + $(this).attr("name"); $(column).toggle(); }) <script src="h ...

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

Analyzing text with improperly defined attributes

As I attempted to analyze an HTML document as XML by adding the XML start at the beginning, I encountered an issue with attributes within tags. <tr> <td class="yfnc_tabledata1" nowrap align="right">Jun 4, 2013</td> <td class="yfnc_tab ...

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

It is believed that if you don't expressly mention the background-repeat in CSS styling, browsers will automatically set it as background-repeat: repeat. With this default behavior in place, one might wonder why there is even a need for a separate ba ...

Tips for transferring simple CSS formatting to an independent stylesheet

As part of a university project, I am working on a basic website. Initially, I used in-line styling for the website design. However, the subject coordinator has now changed the requirements and we are only allowed to use an external CSS stylesheet. Most of ...

Fix the order of the list items with HTML Agility Pack

I've been experimenting with the HTML Agility Pack to convert HTML into valid XHTML for inclusion in a larger XML document. While it mostly works, I've run into an issue with how lists are formatted: <ul> <li>item1 <li> ...

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...