Increasing modal size using bootstrap and html

Question

Increasing modal size using bootstrap and html

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)
#4 by (0 votes)

4

I have a certain modal responsible for displaying some content of the site, however the content can not fit the modal screen, it always stays the same width regardless of the content ... how can increase the size of a modal?

code being used

<div class="modal fade " id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="conteudoModal"></div>
                </div>
            </div>
        </div>
    </div>

html css modal bootstrap

asked by anonymous 08.03.2017 / 18:59

4 answers

how to avoid multiple function calls in the view? Error when trying to extract table from a site by R, how to solve?

score 2 · Answer 1

The bootstrap modal has the following size options:

Large - Maximum of 900px

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

Small - Maximum of 300px;

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

Default is Medium - Maximum 600px

score 2 · Answer 2

2

Create an internal CSS in the HTML itself, it will look like this below

<style>
    .modal .modal-dialog { width: 60%; } 
</style>

10.11.2017 / 13:38

score 0 · Answer 3

0

Try to change the width of the content in CSS.

#conteudoModal {
    width: 100%;
}

15.07.2017 / 20:37

score 0 · Answer 4

You should have some CSS rule blocking this size, I made an example with your modal and it works perfectly see:

Modal Example

I put 2 CSS rules only, the first determines the modal size and the second only makes the content 100% of the size of it:

.modal-content{
  width: 800px;
}

#conteudoModal{
  width: 100%;
}