CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
wobsoriano
wobsoriano

Reputation: 13462

Implementing Grid System in Bootstrap Modal Form

I have a form inside a modal and this is what it looks like: enter image description here

My code is:

<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Contact</h4>
      </div>
      <form action="addcontact.php" method="POST">
      <div class="modal-body">
          <div class="form-group">
          <label for="contactfname">First Name</label>
          <input type="text" class="form-control" id="contactfname" name="txt_fn" required>
          </div>
          <div class="form-group">
          <label for="contactmname">Middle Name</label>
          <input type="text" class="form-control" id="contactmname" name="txt_mn" required>
          </div>
          <div class="form-group">
          <label for="contactlname">Last Name</label>
          <input type="text" class="form-control" id="contactlname" name="txt_ln" required>
          </div>
          <div class="form-group">
          <label for="contactea">Email Address</label>
          <input type="email" class="form-control" id="contactea" name="txt_ea" required>
          </div>
          <div class="form-group">
          <label for="contactnum">Mobile Number</label>
          <input type="text" class="form-control" id="contactnum" name="txt_num" required>
          </div>
          <div class="form-group">
          <label for="contactgroup">Select Group</label>
          <select name="txt_group" class="form-control" id="contactgroup" required>
          <option value="">Choose group...</option>
          <?php 
          require 'conn.php';
          try {
              $data = $conn->query("SELECT * FROM tbl_groups");
              foreach($data as $row) {
          ?>
              <option value="<?php echo $row['id']; ?>"><?php echo $row['groupname']; ?></option>
          <?php 
            } } catch (PDOException $e) {
              echo 'ERROR: ' . $e->getMessage();
            }
          ?>
          </select>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <input type="submit" name="addgroupbtn" class="btn btn-primary" value="Save Contact">
      </div>
      </form>
    </div>
  </div>
</div>

However when the screen is small, it doesn't fit and it looks messy. And what I wanted to do is like this:

enter image description here

Is this possible inside a modal? Any help would be much appreciated.

Upvotes: 0

Views: 2163

Answers (1)

Bino
Bino

Reputation: 904

Ya it is possible inside in a modal. You can simply do it with a Grid system. Here is the working code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addContactModal">
  Launch demo modal
</button>



        <div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add Contact</h4>
          </div>
          <form action="addcontact.php" method="POST">
          <div class="modal-body">
              <div class="container-fluid">
                  <div class="row">
                      <div class="col-md-6 col-sm-6 col-xs-6">
              <div class="form-group">
              <label for="contactfname">First Name</label>
              <input type="text" class="form-control" id="contactfname" name="txt_fn" required>
              </div>
              <div class="form-group">
              <label for="contactmname">Middle Name</label>
              <input type="text" class="form-control" id="contactmname" name="txt_mn" required>
              </div>
              <div class="form-group">
              <label for="contactlname">Last Name</label>
              <input type="text" class="form-control" id="contactlname" name="txt_ln" required>
              </div>


                  </div>
                   <div class="col-md-6 col-sm-6 col-xs-6">
              <div class="form-group">
              <label for="contactea">Email Address</label>
              <input type="email" class="form-control" id="contactea" name="txt_ea" required>
              </div>
              <div class="form-group">
              <label for="contactnum">Mobile Number</label>
              <input type="text" class="form-control" id="contactnum" name="txt_num" required>
              </div>
              <div class="form-group">
              <label for="contactgroup">Select Group</label>
              <select name="txt_group" class="form-control" id="contactgroup" required>
              <option value="">Choose group...</option>
              <?php 
              require 'conn.php';
              try {
                  $data = $conn->query("SELECT * FROM tbl_groups");
                  foreach($data as $row) {
              ?>
                  <option value="<?php echo $row['id']; ?>"><?php echo $row['groupname']; ?></option>
              <?php 
                } } catch (PDOException $e) {
                  echo 'ERROR: ' . $e->getMessage();
                }
              ?>
              </select>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input type="submit" name="addgroupbtn" class="btn btn-primary" value="Save Contact">
                </div>
              </div>
                  </div>
          </div>
          </form>
        </div>
      </div>
    </div>
  </body>

Upvotes: 1

Related Questions