Centered Bootstrap 4 modal with responsive width

Struggling to create a BootStrap 4 Modal that is centered in the screen and adjusts its width based on content? You're not alone. Despite trying different approaches like the container fluid and CSS methods, achieving a variable width modal is proving to be a challenge. If you have any suggestions or tips, I would greatly appreciate them as I'm not an expert in these tools.

Here's a look at my current modal:

<div class="modal fade" id="modal_{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="snapshotmodal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title" id="myLargeModalLabel">Snapshot:</h4>
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                      <div class="row">
                          <div class="col-md-auto">
                              <h4>{{ alert.title }} </h4><br><br>
                              {{ alert.data|safe }}  
                          </div>
                      </div>  
                </div>
           </div>
       </div>
    </div>
</div>

Any assistance is greatly appreciated. Thank you in advance.

Answer №1

Bootstrap modal is designed as a flexbox component, allowing for easy customization:

.modal {
  /* Styles to adjust modal visibility */
  display: flex !important;
  opacity: 1 !important;
}

.modal-dialog {
  justify-content: center !important;
}

.modal-content {
  width: initial !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="modal fade" id="modal_{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="snapshotmodal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myLargeModalLabel">Snapshot:</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-auto">
              <h4>{{ alert.title }} </h4><br><br>
              {{ alert.data|safe }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

When attempting to organize the layout of the dash app using app.layout=dbc.Container(), an AttributeError occurs, indicating that the 'layout' attribute is not available in the 'tuple' object

I am facing an issue with the script I have: import dash import pandas as pd import numpy as np import database from dash import Dash, dcc, html import dash_bootstrap_components as dbc # create a dash app that is mobile-friendly app = dash.Dash(__name__, ...

Issue with ng2 pdf-viewer: Text becomes less visible as you zoom in

This custom implementation includes a zoom-in and zoom-out feature. When clicking on zoom in, the value of [zoom] increases by 0.25, and when clicking zoom out, the value decreases by 0.25. The PDF container div has a width of col-md-6 and a maximum heigh ...

Showing information retrieved from a database using PHP in a sequential manner

I'm currently working on developing a webpage that features 6 rows of images, with each row containing 4 images accompanied by captions right below them. The structure I have in mind is as follows: IMAGE IMAGE IMAGE IMAGE TEXT TEXT TEXT TEXT IMAGE ...

What is the best method for linking an HTML file to CSS, javascript, and image files?

I need assistance with running an HTML file along with its source files that I downloaded from the server. The HTML file is located in NSCachesDirectory and here is the code snippet I am using. Can someone please help me figure this out? NSArray *paths ...

Avoid repetitive comment form submissions

I have a comment form for my article and I want to prevent re-submission. Wordpress handles this well without causing the browser to request a form re-submission. However, I can't figure out how they do it even though our methods are similar. My Appr ...

Searching for a column fails to yield any results after altering the value in

Here is a snippet of code that I am working with: <!DOCTYPE HTML> <html lang="en"> <head> <title> Exact matches overview </title> <script type="text/javascript" src="/static/s ...

Using JQuery to Enhance the Highlight Effect: Tips and Tricks

Exploring the functionality of the "highlight" JQuery effect: http://docs.jquery.com/UI/Effects/Highlight You have the ability to modify the background color of any DIV element with a fade in/out effect. However, the provided example demonstrates trigge ...

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

I have successfully implemented server-sent events (HTML5) in my project without using node.js. It is a simple webpage (another JSP page) that makes a call and receives a response. However, when I receive the response, none of the methods/functions (onopen ...

Setting the maximum width for a JavaScript pop-up box

Below is the html code that creates a link reading "sacola de compras" <div> <script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script> <script type="text/javascript"> xMinicart("style=","layout=Mini") ...

The background image fails to load in ReactJS application

Usually, I have no trouble finding solutions to my problems, but this time I'm really stuck - and I apologize in advance if my question seems silly or trivial. I am currently working on a simple React app where I need to set a background image for th ...

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

Loading necessary CSS when needed in React JS

I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...

Is there a way to get Axios to display CSS on the page?

While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...

Struggling to manipulate the transparency of an image contained within a div element

I am struggling to achieve the desired effect of having an opaque image inside a transparent div. I have tried setting the opacity for both the image and the div, but it doesn't seem to be working as expected. Here is my jsFiddle Link for reference: ...

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

What methods can be used to customize the font and background color of a website for different user groups?

Trying to incorporate a template into my project. My client has requested the following: The regular user area should feature a blue background. The professional user area should have an orange background. Is there a way to set up a condition to change ...

The code functions properly when tested on a local server, but doesn't produce any results when

Currently, I am working on customizing a premade website and have been tasked with making a modification. The goal is to implement a confirmation box that appears when a button to delete a meeting task is clicked, rather than immediately deleting it. Afte ...

What is the best method for sending PHP data to an HTML file?

Once the user logs in, I aim to direct them to a separate HTML page (a landing page) that greets them with "welcome, (user)." I initially attempted to utilize cookies for this functionality but realized it isn't feasible. How can I achieve this? Here ...

What is the best way to incorporate additional list items into a field input?

I have been working on developing a simple to-do app and I am encountering an issue. After the user clicks enter in the input box, nothing happens as expected. Despite trying various methods, the problem persists. Below is the recent code that I have been ...

Two full screen divs aligned side by side using float:left

Looking for a way to create UL or DIV elements where each list item/child div takes up the full screen space (100% width, 100% height) and is floated left for horizontal scrolling. Here's my code, but it's not working as expected: HTML: <htm ...