Twitter bootstrap changeable vertical/horizontal form layout with little modification

user7851085
May 8, 2017
176 views
1 vote
2 Answers

I am making an app where there are lots of forms and i am fatigued at the thought of referring to the form reference for the tricky vertical aligned forms and horizontal aligned forms.

I want a final snippet that will be my point of reference when i want a vertical and a horizontal form.

For a vertical form(forms aligned vertically) i use this code

https://jsfiddle.net/bgebzwqd/11/

<form role="form">
       <div class="form-group">
          <label for="name">First name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group">
          <label for="address">Second name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group">
          <label for="email">Email</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group">
          <label for="pwd">Password</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group col-md-4">
         <button type="submit" class="btn btn-default">Register</button>
       </div>
    </form>

For horizontal forms i have this

https://jsfiddle.net/0jwzxoe2/20/

<form role="form">
<div class="form-group">
            <div class="col-xs-3">
              <label class="control-label">One</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3">
              <label class="control-label ">Two</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3">
              <label class="control-label ">Three</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3">
              <label class="control-label ">Four</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3">
              <label class="control-label ">Five</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3">
                <button type="submit" class="btn btn-default">Register</button>
            </div>
        </div>
    </form>

In the first form(vertical forms), how can i control the width of the form bootstrap way(trying and avoiding custom css)

In the second, i want to have the button at the bottom and also have some spacing vertically. In the current example, there seem to be no space.

To solve the problem, i want to avoid using custom css and try solving this using what’s available in bootstrap only.

Tags: css twitter-bootstrap

Answers

Use Below Code

<form role="form">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="name">First name</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="address">Second name</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="email">Email</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="pwd">Password</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12">
           <div class="form-group col-md-4">
             <button type="submit" class="btn btn-default">Register</button>
           </div>
        </div>
    </div>
 </form>

I ended up doing this for vertical forms

https://jsfiddle.net/codebreaker87/zqjva21d/

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<div class="container">
  <style>.width500{width:500px;margin-left:30px;}</style>
                                      <form role="form">
                                        <div class="row">
       <div class="form-group  width500">
          <label for="name">First name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500 ">
          <label for="address">Second name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500">
          <label for="email">Email</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500">
          <label for="pwd">Password</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500">
         <button type="submit" class="btn btn-default">Register</button>
       </div>
     </div>
    </form>

    </div>

For horizontal forms https://jsfiddle.net/codebreaker87/zqjva21d/21/

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<div class="container">
<form role="form">
<div class="form-group">
<style>.mb{margin-bottom:20px;}.ml{margin-left:15px;}</style>
            <div class="col-xs-3 mb">
              <label class="control-label">One</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3 mb">
              <label class="control-label ">Two</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3 mb">
              <label class="control-label ">Three</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3 mb">
              <label class="control-label ">Four</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3 mb">
              <label class="control-label ">Five</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>

              <div class="col-xs-3 mb">
              <label class="control-label ">Six</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>

        </div>
        <div class="row">
         <div class="col-md-12 ml ">
                <button type="submit" class="btn btn-default">Register</button>
            </div>
        </div>

    </form>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.