Line break in bootstrap

You can do two ways, using .row representing as line or .clearfix that breaks the line:

In case .row would be:

<!-- Linha 1 -->
<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Nome)
   </div>
</div>

<!-- Linha 2 -->
<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Sobrenome)
   </div>
</div>

Or <div class="clearfix"></div> :

<div class="row">
   <div class="col-md-6">
       @Html.EditorFor(model => model.Nome)
   </div>

   <!-- Quebra linha -->
   <div class="clearfix"></div>

   <div class="col-md-6">
       @Html.EditorFor(model => model.Sobrenome)
   </div>
</div>

You can use .row as you jump down without spacing, but if you use the class form-group you can already get a space between the top and bottom fields.

You can look a little more at this link

You can do this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
        <div class="col-md-6">
           <input type="text">
        </div>
    </div>
    <div class="row">
       <div class="col-md-6">
           <input type="text">
       </div>
    </div>

ou assim:

    <div class="form-group">
    	<div class="col-md-6">
    	   <input type="text">
    	</div>
    </div>
    <div class="form-group">
       <div class="col-md-6">
          <input type="text">
       </div>
    </div>

Alisson, I recommend studying the Grid system that you should follow when using bootstrap.

link

By declaring your HTML by following this structure, your screens will be able to adjust according to the size of the device you are accessing.

A simple example:

Here, I want to for small screens, my button occupy the entire screen. For large screens, only 1/4 of the screen:

<div class='row'>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'>Botão 1 </button>     
    </div>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'>Botão 2 </button>     
    </div>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'>Botão 3 </button>     
    </div>
    <div class='col-lg-3 col-xs-12'>
         <button type='button' class='btn btn-primary' style='width:100%'> Botão 4 </button>  
    </div>
</div>

Remembering that you should never change the position of your page elements by using CSS styles like position: absolute and top / left fixed. This will produce a distorted effect when used in conjunction with the bootstrap.

Hello, Alisson. In Bootstrap, the row class represents one row, while col-md-* represents the columns. In your code, note that there is a line with two columns.

If you need another line, just place each EditorFor inside a div with class row. I suggest you take a look at the Bootstrap documentation to understand how the grid system works: link .

Hug.