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

Issue: Unable to find solutions for all parameters in (?, ?)

Below is the unit test I've written for my Angular 10 component, which showcases a tree view with interactive features: import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/for ...

angulartypescriptjasminekarma-jasminekarma-runner

What is the best way to display a book cover and position it in a specific location?

There is a dynamically populated HTML table using AJAX: (shown in the image below) If I click on any cell in the table, except for headers c1 through c4, I want to display a cover hiding the cells to the left of the clicked cell: (as shown in the image be ...

jqueryhtmlcss

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

``Inconvenience of Extensive URLs Being Displayed in Tables

I've been struggling to find a solution for the problem I'm facing with Chrome when it comes to wrapping long URLs in a table cell. Despite trying various solutions found online, including using the CSS code word-wrap: break-word;, I have not bee ...

htmlcssgoogle-chromecss-tables

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

javascriptangularjsangulartypescript

How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

I'm working on Front end Code <ng-select formControlName="constituencyId" placeholder="Select Constituency" (change)='onContituencyChanged($event)'> > &l ...

javascriptasp.netangulartypescriptangular-ngselect

Choosing and transferring the table data to be shown in the pop-up box

Having encountered an issue with a popup trigger placed inside a td element, I am seeking advice on how to pass table data into the popup window. Unfortunately, the main popup window was positioned outside the while loop, resulting in multiple instances of ...

cssjsonajaxpopuppopupwindow

Printing style in CSS

Everything looks good on my webpage. For printing, my CSS adjusts the layout and section sizes. Unfortunately, there is an issue with the print layout - there is a one-inch margin on the left side causing two elements to go off the page on the right. I ...

cssprintingmargin

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...

javascriptjqueryhtmlcss

Tips for reactivating a disabled mouseover event in jQuery

I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...

javascripthtmljquerycss

How can I replicate the Firefox style in IE8 using Bootstrap and CSS?

My webpage is styled with Bootstrap v2 and looks great in Firefox. However, I'm struggling to apply the same CSS color style in IE8: .navbar-inverse .navbar-inner { background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #fab ...

csstwitter-bootstrap

What is the best way to reset the current page using angular pagination?

I used a tutorial on the pagination implementation in my Angular application, which can be found at this link For the search functionality, I have two components. The first is the parent component that includes the search parameters and a button to trigge ...

angularpagination

Angular component failing to refresh data upon service response

Within my Angular component, I have integrated badges onto certain icons. These badge numbers are fetched from an api upon entering the page, utilizing ionViewWillEnter(). Once the api response is received, the outcome is stored in a local variable, which ...

angularionic-frameworkangular-changedetection

Cover the entire page with a solid background color

Is there a way to extend the green color from top to bottom on the page? Also, how can I move the CRUD section to the left? I'm having trouble filling the entire page with the content. Below is my code written in VueJS: <template> < ...

cssvue.jsbootstrap-vue

Is there a way to define the width of an element within the display:flex property in CSS?

Could you please review the following: https://codepen.io/sir-j/pen/dyRVrPb I am encountering an issue where setting the input [type=range] to 500px doesn't seem to make a difference from 100px, 500px, or 800px. This leads me to believe that display ...

javascripthtmljquerycss

Ways to show a child's component element within the parent container

Within my Angular 11 project, there exists a component that exhibits a child component containing assorted table filters: Parent Component <table-filters></table-filters> <table> ... </table> Child Component (table-filters) <f ...

javascriptangularangular11

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

javascriptcssfonts

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

javascripthtmlangularangular2-formsangular4-forms

Error: Cannot access Angular 5 Title service at this time

When attempting to change the page title using BrowserModule, I encountered an issue. I added the BrowserModule and Title in the application module as shown here: https://angular.io/guide/set-document-title However, in a child module where I tried to add ...

angulartypescripttitle

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4: import { Component, ViewEncapsulation } from '@angular/core'; i ...

csstwitter-bootstrapangularweb-componentbootstrap-4