CODEWITHSUNDEEP
csstwitter-bootstrap
Grizzly
Grizzly

Reputation: 5943

Position alert next to input field with same space between multiple input fields

On my form I have two fields like so:

<div class="form-group">
    @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.Label("State", new { @class = "control-label col-md-2" })
    <div class="col-md-4">
        <div class="tt-container">
            @Html.Editor("StateName", new { htmlAttributes = new { @id = "StateName", @class = "form-control" } })
        </div>
        @Html.ValidationMessageFor(model => model.StateId, "", new {@class = "text-danger"})
    </div>
    <div class="alert alert-dismissible alert-warning col-md-6">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Warning!</h4>
        <p>Please select the state the appears as you continue to type in the state where you are from.</p>
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>
</div>

On the view it looks like so:

enter image description here

How do I make it so that there is the same space between the State input field and the email input field, just like the amount of space between city and state input fields?

Upvotes: 1

Views: 293

Answers (1)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

Bootstrap grid examples

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.alert{
min-width:250px;
}
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
  <div class="col-md-3 col-sm-4 col-xs-6"><form class="form-inline">
  <div class="form-group">
      <label for="email">Email address:</label>
       <input type="email" class="form-control" id="email">
    </div>
     <div class="form-group">
       <label for="pwd">Password:</label>
         <input type="password" class="form-control" id="pwd">
     </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
   </div>
    <div class="col-md-3 col-sm-4 col-xs-6 container">
       <div  class="alert alert-info">alert</div>
    </div>
</div>

Upvotes: 1

Related Questions