Botão em modal do lado esquerdo e direito Bootstrap4

24 de maio de 202324 de maio de 2023 admin 0 comentários

Left & right align modal footer buttons in Bootstrap 4

Olá tudo bem? Uma forma simples de colocar um botão em cada lado no footer de seu formulário ou modal que utiliza Bootstrap4, segue o código.

<!DOCTYPE html>
<html>
  <head>
  <title>Galaxyz do Brasil - Bootstrap Button footer left and right exemple </title>

  <meta charset="UTF-8">
  <meta name="description" content="Galaxyz do Brasil Softwares e Técnologia, porque sua experiência tem que ser única.">
  <meta name="keywords" content="Softwares, Aplicativos, Android, Ios, Flutter, Angular, Java, PHP, C#, Laravel, Hibernate, Swift, Javascript, Nodejs, VueJs, Spring Boot, softwares em mandaguari, aplicativos em mandaguari, aplicativos em mandaguari e região,aplicativos em maringá, fábrica de aplicativos em maringá, apps em maringá, lojas virtuais em maringá, e-commerce em maringá, empresa de tecnologia em maringá, criação de app maringá, desenvolvimento de aplicativos em maringá, criação de sites em maringá, desenvolvedor de loja virtual, empresa de tecnologia em maringá, desenvolvimento de e-ecommerce em maringá, criação de e-commerce, consultoria de e-commerce, criar sistema online, design e tecnologia em maringá, criar site em maringá, criação de software em maringa, integração de software, API de integração entre sistemas, APÌ de integração entre sistemas maringá e região, APÌ para Ecommerce, API integração Ideris e seu ERP, API Integração Bling e seu ERP, API Integração Tiny e seu ERP, API Integração Olist e seu ERP, API Integração Mercado Livre e seu ERP, API Integração Shopee e seu ERP, APÌ para Ecommerce e seu sistema, API integração Ideris e seu Sistema, API Integração Bling e seu Sistema, API Integração Tiny e seu Sistema, API Integração Olist e seu Sistema, API Integração Mercado Livre e seu Sistema, API Integração Shopee e seu Sistema">
  <meta name="author" content="Kleber Gracia Soares - Galaxyz do Brasil">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


  </head>
  <body>



  <div class="d-flex justify-content-center align-items-center" style="height: 600px;">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >
      Abrir modal - Exemplo Botão footer left and right. By Galaxyz do Brasil.
    </button>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal Bootstrap4 - By Galaxyz</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Criado por Kleber Gracia Soares
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary mr-auto" type="button">Esquerda Button</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary">Salvar</button>
        </div>
      </div>
    </div>
  </div>

  </body>
</html>

Exemplo do código funcional https://galaxyz.com.br/labs/bootstrap/indexBottonFooterLeftAndRight.php

Espero ter ajudado.

Please follow and like us: