Utilizing the default Bootstrap3 CSS files for my project. I've come across an issue where the modal-dialog width is set to 600px by default, while I require it to be 1000px for my screen size.
Regardless of the screen size exceeding 1000px, I need the modal width to remain fixed at 1000px. This can be achieved with the following code:
<style>
.modal-dialog { width: 1000px; }
</style>
The above code works as intended. However, resizing the window below 1000px should ideally make the dialog responsive to the window width. For larger windows exceeding 1000px, the dialog must remain at a constant width of 1000px.
I attempted to use:
<style>
.modal-dialog { width: auto; }
</style>
However, this maintained the default behavior of Bootstrap, keeping the width at 600px. I want the dialog behavior to mimic that of Bootstrap but with a width of 1000px.
Various solutions were explored on Stack Overflow, particularly in this thread, but none provided a viable solution for my specific requirement.