How to add grid inside of the form in Bootstrap twitter?

Question

I have form with submit button. Once user clicks on Submit I would like to show the message like Record Successfully saved next to the button. Here is example of my form:

<form name="frm_myaccount" id="frm_myaccount" class="frm-Submit" autocomplete="off">
    <div class="form-group required">
         <label class="control-label" for="answer">Answer</label>
         <input type="text" class="form-control" name="frm_answer" id="frm_answer" placeholder="Enter Answer" maxlength="100" required>
    </div>
    <div>
        <div class="col-xs-2">
             <button type="submit" class="btn btn-primary">Submit</button>
        </div>
        <div class="col-xs-10">
             <div id="myaccount-message" class="alert"></div>
        </div>
    </div>
</form>

Code above moved Submit button outside of the form grid. I'm wondering if there is any class that is used inside of the form to group elements together in the same grid?

Answer 1

"Submit button outside of the form grid"

It's still inside of form grid, but just got margin of 15px

Problem is

You gave your button class col-*-2, which gave it margin:15px

Solution

1. Remove col-*-2 from your 2nd form-group
2. Add JS for success message, and gave it property inline-block
3. Important- remove padding from class .alert

$('#frm_myaccount').submit(function(e) {
  $('#myaccount-message').append("<p style='line-height:0px; color:green; font-weight:700;'>Submit Recorded Successfully!</p>");

  e.preventDefault();
});

.alert {
  padding: 0px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.js"></script>
<form name="frm_myaccount" id="frm_myaccount" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="answer">Answer</label>
    <input type="text" class="form-control" name="frm_answer" id="frm_answer" placeholder="Enter Answer" maxlength="100" required>
  </div>
  <div class="form-group">
    <button style="display:inline;" type="submit" id="forrm" class="btn btn-primary">Submit</button>
    <div style="display:inline-block;" id="myaccount-message" class="alert"></div>
  </div>
</form>