Center both vertically and horizontally in Bootstrap UI Modal

I'm attempting to create a Bootstrap UI Modal that is centered both vertically and horizontally.

While I found this solution that successfully centers the modal vertically, it loses its horizontal centering when applied to my own template with 800px width:

For example - http://plnkr.co/edit/vp3IWIcrpGG6ehH8JKVe?p=preview

Is there a way to achieve vertical and horizontal center alignment for the modal using my own dynamic template?

Please Note: The width and height of the template are variable, so any solution should accommodate various dimensions.

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Answer №1

The main cause of the modal losing its center alignment can be attributed to a specific CSS rule:

@media (min-width: 768px) {
    .modal-dialog {
      width: 600px;
      margin: 30px auto;
    }
}

Given that your template has an 800px width, it causes the modal to overflow its designated container (the .modal-dialog div).

To resolve this issue, changing the width property of .modal-dialog to auto should provide a solution.

For reference, you can view an example here: http://plnkr.co/edit/cYoYOgN1iMUzPKJuBw9H?p=preview

Answer №2

By customizing the .modal-dialog, I made some changes:

.modal .modal-dialog {
 max-width: 800px;
 width: 100%;
}

The original code had a fixed width:600px; that I updated to max-width:800px;

To ensure compatibility with smaller screens, I included margin auto so it stays aligned. 

@media (max-width: 767px){
  .modal .modal-dialog{
    margin:10px auto;
  }
}

Check out the Plunker demo

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

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...

javascriptjqueryhtml

What would be the optimal type for the second argument of the `simulate` method?

When using the simulate function, I am familiar with code like this: simulate("change", { target: { value: '7' } }); However, if my onChange function requires an object as a parameter, what should I pass in the second argument? interface myObj ...

javascriptreactjstypescriptjestjsenzyme

From JSON object to HTML table: converting structured data into a user

I'm currently facing a challenge when trying to iterate through JSON data retrieved from an API and display it in an HTML table. After parsing the original JSON, I accessed its elements as follows: JSON (data retrieved from API): {"PrekesID" ...

javascripthtmljqueryjson

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

htmlcssbackground

What is the best way to incorporate raw HTML code into a .jsx file within a NextJS website?

I need to integrate Razorpay code into my NextJS website, but it's currently in pure HTML format. For example, the code looks like this: <form><script src="https://cdn.razorpay.com/static/widget/subscription-button.js" data-subscrip ...

javascriptnext.js

Updating front end data using Node.js - A Comprehensive Guide

I am looking to create a website using node.js that can dynamically display a plot and update the data every minute without needing to refresh the entire page. As someone new to node.js, I am interested in learning how to use "get" requests to update the d ...

javascriptnode.js

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

javascriptcssreactjstypescriptmaterial-ui

An uncomplicated broadcasting and receiving method utilizing an event emitter

This code is from chapter 3, example 11 of the book Node.JS in Action, found on page 52. var events = require('events'); var net = require('net'); var channel = new events.EventEmitter(); channel.clients = {}; channel.subscriptions = ...

javascriptnode.js

Using the combination of z-index and visibility:hidden makes the button go completely undetect

Can someone please review this code? .parent { visibility: hidden; position: relative; z-index: 1; } .child { visibility: visible; } <button class="parent"> <span class="child">content</span> </button> I' ...

cssbuttonfirefoxz-index

What steps do I need to take in order to modify information within a table using Symfony?

Working on my Symfony project, I frequently need to display various views in table format. I wish I could easily update the data by clicking on table cells, entering new information, and saving it dynamically. After exploring jqGrid, DataTable with jEdit ...

jqueryangularjssymfonyjqgridreactjs

Retrieving exclusive npm packages from an npmjs user

I am currently facing a challenge with transferring all of our npm modules from npmjs.com to a new location. The issue is that our modules are saved under a private npm user account, making it difficult for me to programmatically access and consume all the ...

javascriptnpmnpm-registry

Using AJAX to remove data from a database

My PHP code snippet is displayed below: AjaxServer.php include '../include/connection.php'; // Check for the prediction if(isset($_POST["delete_me"]) && $_POST["delete_me"]=="true"){ $id = $_POST["id"]; $table = $_POST["table"]; ...

javascriptphpajaxdatabaseconnection

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

Is there a way to dynamically reposition the popover that currently appears to the right of the Circle SVG? I would like to either base its position on the user's mouse click within the CircleSVG or move it to the exact center of the SVG, including bo ...

javascriptcssbootstrap-4

Issue with fulfilling Ajax promises

How can I properly use a promise to compare the current logged-in user with a field from a list in SharePoint? function compareCurrentUserWithListObject() { var userProp = this._userProfileProperties; var userName = userProp.get_userProfilePropertie ...

javascriptjqueryajaxsharepoint

"Enhancing the Today Button in FullCalendar with Custom Functionality

My issue lies with the implementation of fullCalendar. Specifically, I am utilizing the week view (defaultView: 'basicWeek') with the toolbar buttons for 'today', 'prev', and 'next'. The problem arises when I click t ...

javascriptangularjsfullcalendarui-calendar

Guide on accessing JSON data within a script tag with jQuery through a bookmarklet

Currently, I am developing a bookmarklet that injects jQuery and attempts to retrieve specific data from a webpage that is built using AngularJS. The JSON data required can be found within a script tag when inspecting the page source in Chrome. <script ...

jqueryangularjsjsonbookmarklet

The Safari browser displays the mobile-friendly version of the website

Everything appears correctly when looking at the website in Firefox and Chrome. However, Safari is displaying the mobile version of the site instead. I did not make any CSS changes specifically for desktop screens while working on the responsive design for ...

cssmobilesafariscreen

The next-routes server.js encounters an issue: TypeError - the getRequestHandler function is not defined within the routes

I encountered an issue in my server.js file. Here is the code snippet causing the problem: const { createServer } = require('http'); const next = require('next'); const routes = require('./routes'); const app = next ({ dev: ...

javascriptnode.jsreactjsnpmnext.js

Is there a way for me to connect a radio button to the app component?

Currently, I am utilizing radio buttons to choose the Month & Year options. However, I am uncertain about how to link the button selection in order to determine which chart should be displayed. //template <b-form-radio-group class="mr-3" i ...

twitter-bootstrapvue.jsbootstrap-vuevue-chartjs

What could be causing the error I'm encountering while attempting to utilize Array.includes as the function for Array.filter in my JavaScript code?

During a recent javascript project, I attempted something like the following code snippet. To my surprise, it did not work and instead produced an error message. const test = [1, 2, 3, 4]; const something = [1, 2, 3, 4, ,5, 6, 7, 8].filter(test.includes) ...

javascriptarraysfilter