Align fields correctly

Question

I really need your help to correctly format/position my form fields and its labels with proper indention and margins. The labels "CATEGORY A" and "CATEGORY B" are just sample text, but actually they will be dynamically changed its content and length, so it is important to auto-wrap it before it overlaps on "Button1" and "Button2" elements. I am using bootstrap here to make my fields responsive.

This is the actual design format that I want to achieve:

And this is the current code that I have so far.

JSFIDDLE

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">     
    <div class="" style="display:none"></div>
	</div>
</div>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">    
        <div class="" style="display:none"></div>
	</div>
</div>

<h4>
Other Fields
</h4><BR><BR>

CATEGORY A <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 1</button><button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 2</button>


<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">     
    <div class="" style="display:none"></div>
	</div>
</div>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">    
        <div class="" style="display:none"></div>
	</div>
</div>

CATEGORY B <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 1</button><button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" title="">Button 2</button>


<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-1">Field 1</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">     
    <div class="" style="display:none"></div>
	</div>
</div>

<div class="form-group ">
	<label class="control-label col-xs-6 col-md-3" for="main-field-2">Field 2</label>
	<div class="form_field col-xs-6 col-md-9  required">
        <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">    
        <div class="" style="display:none"></div>
	</div>
</div>

Answer 1

I think you may need to use some offsets to achieve what you are looking for

Here is one solution you may have to view full page since I did not optimize the smaller viewports. ( I will leave that for you if you want something different )

Notice also that the longer categories will wrap lines as needed and I am not sure if you knew about the btn-sizing classes

another note that may have been causing you some issue was attempting to use inline styles that may break some of the bootstrap classes whenever possible find bootstrap classes that fit your need or create a custom class to fit your need. It makes editing later much easier

.other-fields {
  margin: 40px 0 20px;
  font-weight: 700;
}

.btn-custom {
  min-width: 55px;
  margin-right: 3px;
  margin-bottom: 3px;
  padding: 3px
}
.row.row-fg.category{
  margin-top:20px;
  margin-bottom:20px;
}

<!-- 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">

<!-- Latest compiled and minified JavaScript -->    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
<form class="form">
  <div class="row row-fg ">
    <label class="control-label  col-md-3" for="main-field-1">Field 1</label>
    <div class="form_field  col-md-9  required">
      <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>

  <div class="row row-fg ">
    <label class="control-label  col-md-3" for="main-field-2">Field 2</label>
    <div class="form_field  col-md-9  required">
      <input class="form-control " id="main-label-2" name="main-field-2" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>
  <div class="of-cont">

    <h4 class="other-fields">Other Fields</h4>

    <div class="row row-fg category">
      <div class="col-md-offset-1 col-md-3">
        CATEGORY A
      </div>
      <div class="col-md-8">
        <button class="btn btn-primary btn-custom">Button 1</button>
        <button class="btn btn-primary btn-custom" title="">Button 2</button>
      </div>
    </div>


    <div class="row row-fg ">
      <label class="control-label col-md-offset-1  col-md-2 text-right" for="main-field-1">Field 1</label>
      <div class="form_field col-md-offset-1  col-md-8  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
        <div class="" style="display:none"></div>
      </div>
    </div>


    <div class="row row-fg ">
      <label class="control-label col-md-offset-1  col-md-2 text-right" for="main-field-1">Field 1</label>
      <div class="form_field col-md-offset-1  col-md-8  required">
        <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
        <div class="" style="display:none"></div>
      </div>
    </div>

  </div>

  <div class="row row-fg category">
    <div class="col-md-offset-1 col-md-3">

      CATEGORY B is a long title that should wrap lines. Notice these btns are using btn sizing classes

    </div>
    <div class="col-md-8">
      <button class="btn btn-primary  btn-xs">Button 1</button>
      <button class="btn btn-primary  btn-sm" title="">Button 2</button>
    </div>
  </div>


  <div class="row row-fg ">
    <label class="control-label col-md-offset-1 col-md-2 text-right" for="main-field-1">Field 1</label>
    <div class="form_field col-md-offset-1  col-md-8  required">
      <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>


  <div class="row row-fg ">
    <label class="control-label col-md-offset-1  col-md-2 text-right" for="main-field-1">Field 1</label>
    <div class="form_field col-md-offset-1 col-md-8  required">
      <input class="form-control " id="main-label-1" name="main-field-1" placeholder="Number" title="Enter Value" type="text">
      <div class="" style="display:none"></div>
    </div>
  </div>
  </form>
</div>

Answer 2

You need to adjust the col size for you grid to display like you want.

Take a look at the grid documentation:

https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Also you have different col size for phones I'm not sure you want that.

If your question is about your first two fields to be like in the screenshot, try col-md-2 for label and col-md-10 for the field. Remember that total for a row must always be 12