Bootstrap Modal

Bootstrap Modal, In this article i will explained on how to create a Modal using Bootstrap by stepping through the Sample code below

Modal HTML

1. First navigate to Bootstrap Website at here, to grab the Modal Sample Code.
2. Change the “data-target” at your Button which called out the Modal from  “#exampleModal” to  “freemodal”
3. Change the “id” at your modal code from  “#exampleModal” to  “freemodal”
4. Again Add in a Row and a Column to contain the Modal Picture
5. Add in a Row and Column to contain the form and text input

 

The Code

 

<!-- Modal -->
<div class="modal fade" id="freeModal" 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="contentlabel">Get Update</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <div class="container-fluid">
           <div class="row">
           
                <div class ="col-sm-12">
               
                 <img class="img-fluid" src="assets/image7.jpg">
               
               </div>
                   
           </div>
           <div class="row">
               
               <div class="col-sm-12">
               <div class="modalwrapper">
                   <form>
                    <div class="form-group">
                      <label for="formGroupExampleInput">Example label</label>
                        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                    </div>
                    <div class="form-group">
                        <label for="formGroupExampleInput2">Another label</label>
                        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
                     </div>
                  </form>
               
               
               </div>
           </div>
           
           </div>
           
           
           
           
          
       </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       
      </div>
    </div>
  </div>
</div>
   
    
      
</div>
      

The Output

Check out also Nesting Column and row in Bootstrap here