Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this.

Does anyone have recommendations for a good book to learn Bootstrap design?

<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">
                <h3 class="panel-title text-center">User Login</h3>
            </div>
            <div class="panel-body">
                @Html.ValidationSummary(true)

                <table class="table">
                    <tbody>
                        <tr>
                            <td>@Html.LabelFor(model => model.Username)</td>
                            <td>@Html.EditorFor(model => model.Username)</td>
                            <td>@Html.ValidationMessageFor(model => model.Username)</td>                            
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(model => model.Password)</td>
                            <td>@Html.EditorFor(model => model.Password)</td>
                            <td>@Html.ValidationMessageFor(model => model.Password)</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="Login" class="btn btn-default" style="" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>             

            </div>
        </div>


Your help is greatly appreciated!
Swetha

Answer №1

To eliminate the css style of panel, you should enclose it in the following structure.

<div class="col-sm-6 col-sm-offset-3">
  <div class="panel panel-default">
    ...
  </div>
</div>

Answer №2

One effective technique for centering a panel or group of panels is to utilize a combination of flexbox and the justify-content property:

.row-fluid {
   display: flex;
   justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row text-center row-fluid">
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 1</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 2</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 3</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>

Answer №3

simply include the following CSS code:

position:fixed

to keep an element in view even when scrolling. Check out a demo at http://jsfiddle.net/xyrkyxe8/

#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*adjust to half of your height*/
margin-left: -15em; /*adjust to half of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}

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

Leveraging sessions within the CSS Declaration

Struggling to pass the css file name to my razor page through session. Here's what I've got: Current line of code: <link href="@Url.Content("~/Content/epp.css")" rel="stylesheet" type="text/css" /> Trying to pass 'epp' as a Ses ...

Horizontal compression applied to background image

After following a suggestion ("css only technique number 1" found here http://css-tricks.com/perfect-full-page-background-image/), I experimented with using an inline img element and CSS to create a background image that would occupy the entire browser win ...

Create a dynamic feature in Bootstrap4 where the navigation bar changes color as the user scrolls to different sections of the

Currently building my personal portfolio website with Bootstrap 4, I came up with a great idea: changing the navigation bar color based on different sections of the website. I attempted to achieve this using JQuery's offset and scrollTop functions, bu ...

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

Can basic logic be applied to CSS?

Recently, I have been experimenting with CSS to blur NSFW images in a chatroom until they are hovered over. I have successfully accomplished this task and now my next goal is to implement checkboxes that can toggle the display of these images. I am aware o ...

Having trouble importing font-face in scss

Currently, I am working on incorporating a Google font into my project. This is the desired outcome: However, the actual result is different: The code snippet in App.vue looks like this: <template> <div id="app">Luckiest Guy</ ...

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

I've recently added an Animated Mouse Scroll Down button on my website. However, when I click the button, the smooth scroll feature is not working as expected. Important Note: I already have a separate button for navigating to the next section where ...

A guide to styling a Bootstrap 5 navigation bar

My goal is to have my Bootstrap 5 navigation menu wrap until reaching an xs-sized screen and then display the small screen pills. Currently, it does not wrap properly and when it reaches xs size, the menu disappears without showing the pills. Here's m ...

Using HTML to get the minimum date specified by a different date

Can someone assist me? I am trying to retrieve the minimum parameter for the second date field based on the value entered in the first date field: Check-In: <input type="date" name="checkin" min="<?php echo date('Y-m-d');?>" required& ...

Loading an empty CSS file in Node.js

Just starting out with node.js, and I could really use some help with a small css and image issue that I'm facing. I've streamlined my html and .js for clarity. Despite trying everything, the css and image just won't load. My form and server ...

The fadeOut() function is not functioning properly as the div keeps reappearing even after attempting to

My navigation bar has a unique feature - the subnav expands to fullscreen on hover, while all other subnavs close. However, I encountered an issue with the close button functionality. When clicked, the subnav fades out but then immediately fades back in. ...

End of ImageButton tag

I am currently working on this code : <div runat="server" class="slide"> <img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' /> <div id='details<%# Eval("C ...

A comprehensive guide to navigating pages using AngularJS

Greetings! I've recently embarked on my Angular JS learning journey and have encountered an issue with loading content from pages. Unfortunately, I am not able to receive any content. Below are snippets of my index file and corresponding JavaScript co ...

Ways to retrieve the CSS class names associated with an element

To determine if an element has been selected, I rely on checking for the presence of an additional CSS class called "selected" that is added to the element The structure of my element is as follows: <div class="b-wide-option" data-bind="css: { selecte ...

Scrape embedded content within an IFrame on a webpage with Java

Currently, I am interested in crawling the dynamic content within an IFramed webpage; Unfortunately, none of the crawlers I have tested so far (Aperture, Crawl4j) seem to support this feature. The result I typically get is: <iframe id="template_cont ...

Alter the background image of a DIV based on the selected menu item

I am working on a project that involves a div element with the class "jumbotron" which currently has a background image applied to it. Additionally, I have a menu consisting of 6 items that I would like to interact with. My goal is to dynamically change ...

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

The unhandled type error rises with each scroll I make

Having been diligently working on my current website project, I encountered a puzzling issue. Upon writing code to implement smooth scrolling throughout the site, I found myself facing a persistent error that continues to escalate with each scroll up or do ...

Utilizing Razor Syntax within VueJs Component

To prevent redundant code, I am utilizing VueJs component functionality to create a component that contains the Select dropdown list. Here is the code snippet: Vue.component('select-component', { template: ` <label>elT ...

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...