CODEWITHSUNDEEP
cssbootstrap-4
user9632680
user9632680

Reputation:

Vertical Align Center with Bootstrap Modal 4.3

I'm trying to align vertically in the center of my modal in the body and nothing is happening. What is happening? I use version 4.3 of bootstrap.!

<section>
    <div id="search-shopkeeper-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="shopkeeperModal" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header border-0 p-0 m-0">
                    <div class="container-fluid p-2">
                        <form action="">
                            <div class="form-row">
                                <div class="col-12">
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-prepend">
                                            <span id="search-shopkeeper-addon" class="input-group-text bg-transparent border-0"><i class="fas fa-search"></i></span>
                                        </div>
                                        <input type="text" class="form-control rounded-0 border-0 shadow-none" placeholder="Digite o nome do Lojista..." aria-label="Username" aria-describedby="search-shopkeeper-addon">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-body" style="border: 1px red solid">
                    <!-- @todo -->
                    <div class="container d-flex align-items-center" style="border: 1px red solid">
                        <div><h1 class="text-center">SEM RESULTADOS!</h1></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default text-white shadow-none" data-dismiss="modal" style="background-color: #333333 !important">Fechar</button>
                </div>
            </div>
        </div>
    </div>
</section>

enter image description here

Upvotes: 0

Views: 1709

Answers (2)

Mateech
Mateech

Reputation: 1074

Just add "d-flex align-items-center" classes to modal-body

p.s this is an option to use bootstrap but you can do it via css like in comment above

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#search-shopkeeper-modal">
  Launch demo modal
</button>
<section>
    <div id="search-shopkeeper-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="shopkeeperModal" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header border-0 p-0 m-0">
                    <div class="container-fluid p-2">
                        <form action="">
                            <div class="form-row">
                                <div class="col-12">
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-prepend">
                                            <span id="search-shopkeeper-addon" class="input-group-text bg-transparent border-0"><i class="fas fa-search"></i></span>
                                        </div>
                                        <input type="text" class="form-control rounded-0 border-0 shadow-none" placeholder="Digite o nome do Lojista..." aria-label="Username" aria-describedby="search-shopkeeper-addon">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-body d-flex align-items-center" style="border: 1px red solid; height: 500px;">
                    <!-- @todo -->
                    <div class="container d-flex align-items-center" style="border: 1px red solid">
                        <div><h1 class="text-center">SEM RESULTADOS!</h1></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default text-white shadow-none" data-dismiss="modal" style="background-color: #333333 !important">Fechar</button>
                </div>
            </div>
        </div>
    </div>
</section>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42374

You want to add the following rules:

.modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

This can be seen in the following:

.modal-content {
  height: 500px; /* Needed for this example to demonstrate the change */
}

.modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<section>
  <div id="search-shopkeeper-modal" class="" tabindex="-1" role="dialog" aria-labelledby="shopkeeperModal" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header border-0 p-0 m-0">
          <div class="container-fluid p-2">
            <form action="">
              <div class="form-row">
                <div class="col-12">
                  <div class="input-group input-group-lg">
                    <div class="input-group-prepend">
                      <span id="search-shopkeeper-addon" class="input-group-text bg-transparent border-0"><i class="fas fa-search"></i></span>
                    </div>
                    <input type="text" class="form-control rounded-0 border-0 shadow-none" placeholder="Digite o nome do Lojista..." aria-label="Username" aria-describedby="search-shopkeeper-addon">
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="modal-body" style="border: 1px red solid">
          <!-- @todo -->
          <div class="container d-flex align-items-center" style="border: 1px red solid">
            <div>
              <h1 class="text-center">SEM RESULTADOS!</h1>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default text-white shadow-none" data-dismiss="modal" style="background-color: #333333 !important">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions