Line break in bootstrap

Question

I’m making a form, and I have the following code:

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

This way the fields are side by side, but I would like them to stay, one above and the other below with this same size of columns, but I could not do the "line break", how do I keep the size and do the break? I’m starting to wear the bootstrap now.

NOTE: I am using Razor’s Html helpers.

Answer 1

You can do two ways, using .row which it represents as a line or .clearfix that breaks the line:

In the 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>

Answer 2

You can use the .row that Voce jumps down without spacing, but if you use the class form-group You can already get a spacing between the fields above and below.

can look a little more on this one link

you can do so:

<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>

Answer 3

Alisson, I recommend studying the vision structure (Grid system) you should follow when using bootstrap.

http://getbootstrap.com/css/#grid

By declaring your HTML 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 for small screens, my button occupy the whole 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>

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

Answer 4

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

If you need another line, just put each Editorfor inside a div with Row class. I suggest you take a look at the Bootstrap documentation to understand how the grid system works: http://getbootstrap.com/css/#grid.

Hug.