How do I open the body width of the modal-Fill-in using css

Question

I am not being able to open the body width of the modal using css, because it is too narrow and the buttons are in a column (on each other). Someone knows me how to do?

<div class="modal fade modal-fill-in" id="modalGenericaFullScreen" aria-hidden="false" aria-labelledby="exampleFillIn"
     role="dialog" tabindex="-1">
    <div class="modal-dialog modal-simple">
        <div class="modal-content">
            <div id="contentModalGenericaFullScreen">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" style="margin: 0 auto;">O que deseja fazer? </h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <button id="btn-selecionar-pessoa-como-filial" class="btn btn-primary"><i class="icon wb-search"></i>Selecionar uma Pessoa Jurídica e utilizá-la como Filial </button>
                                <button id="btn-iniciar-novo-cadastro-filial" class="btn btn-success"><i class="icon wb-plus"></i> Iniciar um novo cadastro </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Second-hand:

.modal-dialog {
    /*max-width: 80%; /*largura da modal*/
    /*height: 100%;*/ /*altura da view da modal (não alterar)*/
    /*margin: 0 auto !important;*/ /*centralizar modal horizontalmente*/

    margin-left: 20px !important;
    margin-right: 20px !important;
}

Answer 1

There is a way to make the modal self-adjusting to the content, IE, it will have the width of the buttons, which will be next to each other; and if the screen is smaller, a button goes down the other.

Instead of using margin: 0 auto to try to centralize the modal title, use the class .text-center, and use the class .position-absolute in the icon X to close and the class .m-auto in the title. So everything will be aligned, unlike how it is.

Add to the div.modal-dialog the classes d-inline-block mw-100, so that the modal has the width adjustable to its content, as I said at the beginning. The class .mw-100 is to reset the property max-width fixed that Bootstrap applies according to the width of the screen.

Also put the class .mt-1 on the buttons so they don’t stick together when they are above each other.

Obs.: don’t forget to remove the CSS you used (which is in the question).

It will look like this (run in full screen also):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalGenericaFullScreen">
  Abrir modal
</button>
<div class="modal fade modal-fill-in text-center" id="modalGenericaFullScreen" aria-hidden="false" aria-labelledby="exampleFillIn" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-simple d-inline-block mw-100">
        <div class="modal-content">
            <div id="contentModalGenericaFullScreen">
                <div class="modal-header">
                    <button type="button" class="close position-absolute" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title m-auto">O que deseja fazer? </h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <button id="btn-selecionar-pessoa-como-filial" class="btn btn-primary mt-1"><i class="icon wb-search"></i>Selecionar uma Pessoa Jurídica e utilizá-la como Filial </button>
                                <button id="btn-iniciar-novo-cadastro-filial" class="btn btn-success mt-1"><i class="icon wb-plus"></i> Iniciar um novo cadastro </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>