CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapresponsive
Nayantara Jeyaraj
Nayantara Jeyaraj

Reputation: 2716

Bootstrap Responsive Forms

I have a form that I created using Bootstrap form generator. This form is currently responsive which makes the form elements spread out throughout the browser and looks as follows.

initial

What I would like the form to look like is something as follows though the browser size is in full screen

needed

The View in Context

<head>
        <title>Registration Form</title>
        <script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body>
        <?php
        echo "<div class='error_msg'>";
        echo validation_errors();
        echo "</div>";
        echo form_open('userAuthenticationController/new_user_registration');
        ?>

        <form class="form-horizontal">
        <fieldset>

        <!-- Form Name -->
        <legend>Registration Form</legend>
            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="name">Name</label>
              <div class="col-md-4">
              <input id="name" name="name" type="text" placeholder="Enter your Full Name" class="form-control input-md" required="">
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="phoneNumber">Contact Number</label>
              <div class="col-md-4">
              <input id="phoneNumber" name="phoneNumber" type="text" placeholder="Enter your Contact Number" class="form-control input-md" required="">
              <span class="help-block">In the format of (0*********) E.g. 0771524376</span>
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="username">Username</label>
              <div class="col-md-4">
              <input id="username" name="username" type="text" placeholder="Enter a username " class="form-control input-md" required="">
              <span class="help-block">Should contain at least 6 characters</span>
              </div>
            </div>

            <!-- Password input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="password">Password</label>
              <div class="col-md-4">
                <input id="password" name="password" type="password" placeholder="Enter a Password" class="form-control input-md" required="">
                <span class="help-block">Minimum 5 characters</span>
              </div>
            </div>

            <!-- Select Basic -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="userType">User Type</label>
              <div class="col-md-4">
                <select id="userType" name="userType" class="form-control">
                  <option value="Student">Student</option>
                  <option value="Industry Rep">Industry Rep</option>
                  <option value="Academic Staff">Academic Staff</option>
                </select>
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="identification">Identification</label>
              <div class="col-md-4">
              <input id="identification" name="identification" type="text" placeholder="Enter an identification" class="form-control input-md" required="">
              <span class="help-block">Sliit ID Number(If Student)/ Sliit email( If Academic Staff Memeber)<br> Leave this field blank if you're neither</span>
              </div>
            </div>

            <!-- Button (Double) -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="submit"></label>
              <div class="col-md-8">
                <button id="submit" name="submit" class="btn btn-info" type="submit">Register</button>
                <button id="login" name="login" class="btn btn-info" type="button" onclick="<?php echo base_url() ?>index.php/userAuthenticationController/index">Login</button>
              </div>
            </div>
        </table>
        </fieldset>
        </form>
        <?php
        echo form_close();
        ?>

    </body>

Any help in this regard will be highly appreciated.

Upvotes: 1

Views: 2113

Answers (2)

Akmal Arzhang
Akmal Arzhang

Reputation: 367

Your approach has mistake, here is the correct approach:

<div class="col-md-4">
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input id="name" name="name" type="text" placeholder="Enter your Full Name" class="form-control input-md" required="">
   </div>
</div>

You may use col-md-12 instead or col-md-6 (whatever) but for better view and user experience col-md-4 or -3 works better. Use the above approach in order to view everything correctly.

Upvotes: 2

JustinasT
JustinasT

Reputation: 633

Simply change col-md-4 to col-md-12 everywhere, and read bootstrap documentation.

Upvotes: 3

Related Questions