Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to properly center it?

Below is a condensed version of my modal:

<div class="col-xs-10" style="padding-top: 50px;">

  <div class="panel panel-default col-xs-8" style="padding-left: 0px; padding-right: 0px;">
    <div class="panel-heading">
      <h3 class="panel-title pull-left" style="width: 300px;">Add New Employee</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal" role="form" style="overflow-x:auto;">
        <fieldset>

          <div class="col-xs-6">
            <div class="form-group">
              <label class="col-xs-5" style="padding-left: 0px"> Employee ID </label>
              <div class="col-xs-7">
                <input class='form-control' type="text" id="empID" [(ngModel)]="newEmp.EmpID" name="empID" placeholder="Employee ID" />
              </div>
            </div>
          </div>
         </fieldset>

      </form>
    </div>
  </div>

</div>

And this is where it's being invoked:

<div id="addNewEmployeeModal" class="modal fade" tabindex="-1" role="form" aria-labelledby="myNewEmployeeModal" aria-hidden="true">
 <pto-add-new (updateEmpInfo)="onUpdateEmpInfo($event)" (updateSelectedEmployee)="onUpdateSelectedEmployee($event)"></pto-add-new>
</div>

I apologize if this question seems redundant, but I can't seem to get any of the suggested solutions to work. I'm not sure if I'm applying the attributes to the incorrect div or if there's another issue with my implementation.

https://i.stack.imgur.com/dZXU9.png

csstwitter-bootstrapangular

Answer №1

Utilize col-xs-10 in this manner:

To shift the element to the right by X columns, use col-md-offset-1 or col-sm-offset-1 col-sm-offset-3. Since your modal doesn't occupy all 12 columns, you need to move it 2 columns to the right.

Keep in mind that from bootstrap 3.1 onwards, offset does not function for XS columns.

.col-xs-offset-* is not a valid option. Offset and column arrangement only apply to small screens and larger ones. (Only .col-sm-offset-, .col-md-offset- and .col-lg-offset-*)

Therefore:

You have the choice of using SM or MD columns, or making the element display as display:inline-block; and setting text-align:center; on the modal container

<div class="my_modal_container" style="padding-top: 50px;">

  <div class="panel panel-default my_modal_panel">

CSS:

.my_modal_container{
   text-align:center;
}
.my_modal_panel{
   display:inline-block;
   text-align:left; // or any other value
}

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

Using Angular2, the autofill data on IOS browsers in Chrome is found to be invalid

I am currently using template driven forms in angular2. The form I have developed is working perfectly on desktop and Android devices, however, I am encountering an issue when autofilling the form on Chrome for iPhone - the form becomes invalid. I also hav ...

angularangular2-formsautofillngmodel

Headers with a 3 pixel stroke applied

I have a design on my website that includes a 3px stroke around the header text to maintain consistency. I don't want to use images for this due to issues with maintenance and site overhead. While I know about the text-stroke property, browser suppor ...

javascriptjqueryhtmlcss

Show a background picture while hovering on the main image

Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...

htmlcss

Is it possible for Angular 2 JWT to have an unauthenticatedRedirector feature?

Having transitioned from Angular 1 where JWT tokens were used for user authentication, I had the following code: .config(function Config($httpProvider, jwtOptionsProvider) { // Interceptor to add token to every $http request jwtOptionsProv ...

angularauthenticationjwtangular2-jwt

"Text data will be automatically cut at the end of a page and continue

I encountered the following issue As depicted in the image The data is not being displayed properly In the next td, the last character 3 is also printed on the next line Is it possible to avoid page footer and header without adjusting the page margin? ...

jqueryhtmlcss

Format Currency Fields with Comma Separated Values in Angular and Material UI

In our Angular 9 project, we are implementing currency input fields that require a standard masked label displaying a comma separated format. When the user enters 56000.55 into the input field, upon blur event, we need to show 56,000.55 as a comma separat ...

angularvalidationangular-materialmaterial-uiangular-reactive-forms

Is there a way to verify and send notifications when duplicate entries are added to my table?

Whenever a make and model are added using the "add" button, I need to ensure that there are no duplicates. If a duplicate is found, an alert should be displayed, and the entry should not be added to the table. Unfortunately, I have been unable to find a so ...

javascriptjqueryhtmlcssangularjs

What is the best way to trigger click events within a select dropdown using Angular?

I have implemented two buttons (month, year) that trigger different events. Now, I want to replace these buttons with a select element. Can you guide me on how to achieve this? Here is my current code: // Button implementation <button class="menu-butt ...

htmlangulardom-eventseventemitter

Remove the excess white space surrounding the header background image on the website above the fold

How do I eliminate the white spaces on the left, right, and top of my background image that covers the header area above the fold on my webpage? I am currently testing in Google Chrome and using VS Code as my editor. html, body { width: 100%; height: ...

htmlcssheader

Refreshing Angular 2 + Firebase app causes user to be logged out

Just diving into Angular2, Firebase, and SPAs for the first time. I've been tasked with enhancing a Angular2 (with Firebase email&pw auth) application by adding some new features. The app primarily consists of a blog (main page), a shop (/shop), a ...

angularauthenticationfirebasefirebase-authenticationangular-services

What is the method to convert Javascript values from pixels to percentages?

Is it possible to change the scrolltop value dynamically based on a percentage of the user's screen size? I've been trying to achieve this using JS but haven't had any luck. Here is a link to a codepen that showcases the issue: [link] (http ...

javascriptjqueryhtmlcsswordpress

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Is it possible to use the 34 Responsive Grid system to create a column that takes up two-thirds of the full width? Although the Grid System has equal columns settings, I'm curious how to combine or merge two columns together? <div class="containe ...

css34grid

Click the icon to introduce a fresh row into the table

I have embedded a table with a "plus" font awesome icon. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorig ...

htmlcsstwitter-bootstrap

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

I'm currently revamping a website that features a header with 100% screen height, but I need it to shrink down to 0px when a user starts scrolling. The issue I'm facing is that once the header shrinks to 0px, the page content ends up slightly abo ...

javascriptjqueryhtmlcssscroll

A layout with two columns, one of which has a minimum width

Can a two-column layout be created where one column has a minimum width value? Take a look at the following code: #container { width: 100%; max-width: 1200px; min-width: 960px; height: 600px; margin: 0 auto; } #sidebar { float: left; ...

htmlcss

Exploring the Power of PrimeNG and Observables in Angular 4 with RxJS

After configuring my Angular 4 project with a service like this: const usersURL = 'http://my.super.url.php'; @Injectable() export class UserService { users: Observable<User[]> constructor (public http:Http) let tick$ = Observ ...

angulartypescriptrxjsprimeng

Using jQuery's toggle function with a double click event to change the display to none

A div I created has the ability to expand to full screen upon double click, and I now wish to implement a toggle function so it can return to its original size when double clicked again. Initially, the code successfully increased the size of the div. Howe ...

javascriptjquerycss

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

I have been attempting to incorporate a fade animation using CSS when altering the class of the input and label elements within a form by utilizing the classList.toggle method in JavaScript. I'm puzzled as to why my code isn't producing the desir ...

javascripthtmlcssdomcss-animations

Organizing Ionic Cards in Alphabetical Order

I'm working on a personal project where I want to implement an alphabetical filter. Each time I create an Ionic card, I intend for it to be filtered by the first name, such as Andre, Amber, Beckc, etc... Here's what I have so far: https://gyazo.c ...

angularionic2

Find the nearest iframe relative to a parent element

I am attempting to find the nearest iframe element to a parent element in order to pinpoint the specific iframe that I want to customize using CSS: <div class ="accroche"> <iframe></iframe> <iframe></iframe> &l ...

javascripthtmlcssiframe