Bootstrap twitter button and alert box inside of the grid? - css

Question

I have multiple places in my system where I would like to show the message next to the submit button. Depends on the user activity this message is usually generic for the system like 'Records successfully saved' or 'Invalid access' or 'Invalid data entered in the form field'. With now days standards I see that message usually should be displayed next to the submit button. When i first tried to implement this in bootstrap I had the problem where alert box height is bigger than the submit button height. I was able to fix that problem by overwriting the padding on the alert box div. Here is example:
$('#frm_myform').on('click', function() {
$('#my-message').show().addClass('alert-success').html('Record successfully saved.').delay(10000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
});
});
.alert-Submit {
padding: 5px 15px !important;
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-home"></span> <b>Home Page</b></div>
<div class="panel-body">
<form name="frm_myform" id="frm_myform" class="frm-Submit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="answer">Answer</label>
<input type="text" class="form-control" name="frm_answer" id="frm_answer">
</div>
<div class="row">
<div class="col-md-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-11">
<div id="my-message" class="alert alert-Submit"></div>
</div>
</div>
</form>
</div>
</div>
In example you can see that I tried to use two grids to place submit button and alert box next to each other. Only thing that I would like to change is padding between two grid when alert box can't fit next to the button. In example you can see there is no space between them. This just seems ugly on the small screen and I'm wondering what would be the best way to put some space? Also I'm wondering if there is better approach to show the message in alert box next to the button in bootstrap form?

Answer 1

To show the alert next to the button, there is some easy css you can use to align them together:
CSS:
.align-left { float: left; }
.align-right { float: right; }
HTML:
<div class="row">
<div class="col-md-1">
<button type="submit" class="btn btn-primary align-left">Submit</button>
</div>
<div class="col-md-11">
<div id="my-message" class="alert alert-Submit align-left"></div>
</div>
<div style="clear: both;"></div>
</div>
The "clear: both;" should be placed outside of the two div's you are aligning and inside the div that the elements being aligned are within.
With the align & clear code you can place items next to each other, either against the left or right of the div depending on your class. This code does not require bootstrap to work.