Style the modal body to display as a block on both desktop and mobile devices using CSS

My goal is to ensure that the modal-body is vertically aligned for optimal visibility on both mobile phones and PCs. I am utilizing bootstrap for this purpose.

<div class="modal-body" style="display: inline-block;">
      <div>
        <img class="product-photo-modal" src="" alt="" width="200" height="200">
      </div>
      <div class="text-center">
        <h3>Choose how many:</h1>
        <p class="product-info-modal" style="margin-right: 3px;"></p>
        <div>
          <button class="d-inline p-2 bg-primary text-white" id="substract-item-count" type="button">-</button>
          <p class="d-inline p-2" id="item-count">0</p>
          <button class="d-inline p-2 bg-primary text-white" id="add-item-count" type="button">+</button>
        </div>
      </div>
    </div>

https://i.sstatic.net/r5VBQ.png

htmlcssbootstrap-5

Answer №1

https://getbootstrap.com/docs/5.1/components/modal/#vertically-aligned

If you want to vertically align the modal, simply add .modal-dialog-centered to .modal-dialog.

Assuming that the snippet doesn't include the structure for the modal itself, here's how you can achieve vertical alignment:

<div class="modal-dialog modal-dialog-centered">

</div>

By implementing this, your modal will be centered vertically on all screen sizes when displayed.

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

Assistance with Javascript Objects Using JSON and AJAX

Currently, I am utilizing Ajax to retrieve data from my Json file. A problem I am facing is that in one particular div of my html, I need to include both a heading and a paragraph. I attempted to create a property like so: "headingpara": "<h1> blah ...

javascripthtmljsonajax

Is it possible to utilize Angular's structural directives within the innerHtml?

Can I insert HTML code with *ngIf and *ngFor directives using the innerHtml property of a DOM element? I'm confused about how Angular handles rendering, so I'm not sure how to accomplish this. I attempted to use Renderer2, but it didn't wor ...

htmlangulartypescriptinnerhtmlangular-structural-directive

Notify when the focus is solely on the text box

How can I display an alert only when the focus is on a text box? Currently, I am getting an alert whenever I skip the text box or click anywhere on the page. The alert even appears when I open a new tab. Is there a way to fix this issue? Thank you for your ...

javascriptjqueryhtmltextboxalert

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...

javascripthtmlcssvue.js

Choose content within an HTML tag and modify its appearance

<body> This is text1 <div> This is text2</div> </body> I'm looking to style the text1 only. I attempted to use body{ color:red; } but both text1 and text2 ended up turning red. What I really need is something like th ...

jquerycss

Step-by-step guide to importing a directory in ReactJS

Is there a way to create an input that can upload an entire directory with all its folders intact? I attempted the following code: <input ref={wrapperRef} id="file-upload" name="file-upload" type="file" ...

htmlreactjsnext.js

How can JSON data objects be transmitted to the HTML side?

I created a JSON object using Node JS functions, and now I'm looking to transfer this data to the HTML side in order to generate a table with it. However, I'm encountering difficulties sending the JSON object over because of my limited experience ...

javascripthtmlnode.jsexpress

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

cssiosjquery-mobileuiwebview

I have to define a specific identifier in Django so that I can easily incorporate it into Bootstrap later on

I am working on creating a portfolio in Django. I have a section in my HTML code that connects to my jobs list in Django using {% for ... %} in order to display images, summaries, and titles of my projects. However, there is an ID within this div that refe ...

cssdjangodjango-templates

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Struggling with the alignment of divs in a vertical manner

Looking for a way to align multiple divs inside another div vertically with even spacing between them? They should all start at the top. Currently, my solution has the child-divs positioned at the top-left corner of the parent div (see the first picture): ...

htmlcssreactjs

Adding a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...

javascripthtmldomrangy

Ensure that a group of checkboxes is mandatory

I currently have a series of checkboxes set up like so: <label>What is your preferred movie genre?</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="genre1" name="genre" ...

javascripthtml

Uploading Blobs using JavaScript and FormData

Currently, I'm encountering an issue with uploading a blob generated in JavaScript to my server. The main concept involves a user uploading an image, which is then center cropped and downsampled using JavaScript before being transmitted. Although the ...

ajaxhtmlfile-uploadxmlhttprequestmultipartform-data

Adding JSON data to an array in Angular JS using the push method

I am encountering difficulties with adding data to an existing array. Currently, I have set up a table to display the data, but I want to also include the data in the table when a user enters an 8-digit barcode. Factory angular.module('app.pickU ...

javascripthtmljsonangularjs

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

htmlcssangularjsionic-framework

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: https://i.sstatic.net/mySYe.png I want these "b ...

javascripthtmlcss

Design a sophisticated background using CSS

https://i.sstatic.net/yILwL.png I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent ...

htmlcss

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

javascriptjqueryhtmlcsscanvas

Using jQuery to fetch LDAP data and return it in JSON format

I am encountering an issue with a returned JSON value. When the LDAP result is valid, the JSON return is also OK but when the result is invalid, the JSON becomes invalid as well. I am using UWamp and I am new to this. Thank you all. PHP code : <?php ...

phpjqueryhtmljson