Pagelayout using Bootstrap

Experts,

I am designing a form (Test-Form1) similar to the attached screenshot using html5 ,bootstrap and Angularjs.The form contains 12 rows with each row contains 2 fields (label and input text box ) and below is the sampel code. I know bootstrap uses grid sytstem that appropriately scales up to 12 columns and used predefined class (form-group col-xs-6) for both label and text box to align properly .

The problem with this approach the error message will always show below the text box (Test-Form1)  because I was using all the  12 columns for both the label and text box(form-group col-xs-6).Now I was told to display error message next to text box (Test-Form2) as there is lot of space.How can I achieve this using predefined bootstrap classes?

<div class="col-xs-6 col-md-6 col-lg-6">
  
	<div class="row">
    		<label class="form-group col-xs-6">Name</label>
      		<div class="form-group col-xs-6">
                <input type="text"  id="test" placeholder="Name">

              <span class="error" ng-show="myForm.input1.$error.name">Enter valid Name</span>
               </div>
       </div>
     
       <div class="row">
               <label class="form-group col-xs-6">Age</label>
                <div class="form-group col-xs-6">
                <input type="text"  id="test" placeholder="Age">
      <span class="error" ng-show="myForm.input2.$error.age">Enter valid AGE</span>
               </div>
       </div>
    
      <div class="row">
              <label class="form-group col-xs-6">Organization</label>
              <div class="form-group col-xs-6">
               <input type="text"  id="test" placeholder="Organization">
<span class="error" ng-show="myForm.input3.$error.Organization">Enter valid Organz</span>
               </div>
       </div>

</div>

Open in new window

Test-Form1.png
Test-Form2.png
ksd123Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
XGISConnect With a Mentor Commented:
This is not the solution you are after but it may be something to consider to save even more space.... Tooltips  .. It even points directly to the textbox.. nice!!

that being said.. this looks like a suitable answer to your solution.  Adjacent Validation on JSFiddle

You may or may not be aware that you can create a file called custom.css and override the default bootstrap class without editing it. Just make sure you load your css on the pages where it is required.  This way when you update bootstrap you do not need to worry about migrating your changes.
0
 
ksd123Author Commented:
Thank you for your suggestion
0
 
XGISCommented:
Hello ksd123.. thankyou for the points.. i hope it helped.. just to clarify my answer regarding custom css..... you need to use the same named class to override the existing class. You should not need to change the original class.  eg

custom.css

.error
{
color:red;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.