<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-6 col-md-offset-3"> <div class="block-btn"> <button type="button" class="btn btn-success btn-sm btn-block" data-toggle="modal" data-target="#modal_show"><i class="fa fa-plus"></i> Afficher modal</button> </div> </div> <div class="modal fade" tabindex="-1" role="dialog" id="modal_show"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h6>Ajouter un partenaire</h6> </div> <div class="modal-body"> <form method="POST" action="#" name="form_modal" id="form_modal"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="nom">Nom</label> <input type="text" name="nom" id="nom" required="required" class="form-control input-sm" value=""> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="adresse">Adresse</label> <input type="text" name="adresse" id="adresse" required="required" class="form-control input-sm" value=""> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="code_postal">Code postal</label> <input type="text" name="code_postal" id="code_postal" required="required" class="form-control input-sm" value=""> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="ville">Ville</label> <input type="text" name="ville" id="ville" required="required" class="form-control input-sm" value=""> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="telephone">Télephone</label> <input type="text" name="telephone" id="telephone" required="required" class="form-control input-sm" value=""> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="email">E-mail</label> <input type="email" name="email" id="email" required="required" class="form-control input-sm" value=""> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label for="type_materiel">Type de matériel en charge</label> <select class="form-control" name="type_materiel" id="type_materiel" required="required"> <option value="">Sélectionner</option> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> </select> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <label for="commentaire">Commentaire</label> <textarea class="form-control" rows="2" name="commentaire" id="commentaire"></textarea> </div> </div> </div> <div class="row"> <div class="col-sm-12 col-sm-12 col-md-6"> <button type="submit" class="btn btn-success btn-block">Valider</button> </div> <div class="col-sm-12 col-sm-12 col-md-6"> <button type="button" class="btn btn-warning btn-block" data-dismiss="modal" aria-label="Close">Annuler</button> </div> </div> </form> </div> <div class="modal-footer"></div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->