stormec56 stormec56 - 3 months ago 9
CSS Question

Aligment of Inputs in Bootstrap in Two Rows

I am trying to align form as it is on the image:

enter image description here

and this is the code I have so far:

<div class="col-md-6 myForm">
<form role="form" id="assureForm">
<div class="form-group">
<input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
</div>
<div class="form-group">
<input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
</div>
<div class="form-group">
<input type="text" name="company" class="form-control company"placeholder="Company" />
</div>
</form>


This is obviously not what I want, as they all get aligned in one row. How can I align them in two rows?

Answer

You need to specify device too because col-md-6 is will be 50% on mediam screen size but on mobile devoce it'll be 100%

So use: The Bootstrap grid system has four classes:

  • xs (for phones)

  • sm (for tablets)

  • md (for desktops)

  • lg (for larger desktops)

Try this,its working fine:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="myForm">
      <form role="form" id="assureForm" class="row">
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
          </div>
        </div>
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
          </div>
        </div>
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
          </div>
        </div>
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="text" name="company" class="form-control company" placeholder="Company" />
          </div>
        </div>
      </form>