Bootstrap 3 form with input fields and text data in separate rows/cells?

Question

I have form inside of the modal box that has combination of input fields and plain text. I'm wondering what is the general rule in bootstrap for this kind of situation. How the elements should be organized? Should I use <div class='form-group'> for everything or it's ok to use <div class='row'><div class='col-xs-12'> for example? Here is what I have so far:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="modal-title">Title</h5>
      </div>
      <div class="modal-body">
        <form id='frm_my'>
          <div class='row'>
            <div class='col-xs-12'>Frm validation rules in description here. Dummy text for testing purpuse.</div>
          </div>
          <div class='row'>
            <div class='col-xs-1'><input type='checkbox' name='check' id='check'></div>
            <div class='col-xs-11'>Field 1 description with some dummy text (example)</div>
          </div>
          <div class='row'>
            <div class='form-group'><label for='comment'>Comment:</label><textarea class='form-control' rows='2' id='comment'></textarea></div>
          </div>
          <div class='row'>
            <div class='col-xs-12'>Click on the Accept button if you would like to save the form data. <b>Accept</b>.</div>
          </div>
          <div class='row'>
            <div class='col-xs-12'>To cancel this screen and return to the display screen, click <b>Cancel</b></div>.
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Accept</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

Also, I'm wondering if there is a way to add padding around the form so it's not right next to the edge of the modal box? Thank you.

Answer 1

JS Fiddle

(From the code it seems that Bootstrap 4.3.0 is used. Thus the class col-xs-12 is changed to col-12 in the code)

TL;DR Grids can be used. It should be better to use form-group to wrap the form elements (that's why Bootstrap provided them!).

Grids can be used in modals, as written in the docs. (This is for 3.4, and for v4.0 here) You may want to use it say when you want a 2-column layout.

Forms elements are better wrapped by form-control and special treatments has to be done to <input> with type checkbox, file, radio. (So we have the default styling and positioning by Bootstrap). Docs

For using grid with forms, also checkout Form Grid.

After adding styling via form-group, if you want more padding to the left and right, you may also add <div class='container'>.