Editar o anular la fila en Twitter bootstrap es una mala idea, porque esta es una parte central del andamio de la página y necesitará filas sin un margen superior.

Para solucionar esto, cree una nueva clase “top-buffer” que agregue el margen estándar que necesita.

 .top-buffer { margin-top:20px; } 

Y luego utilícelo en los separadores de filas donde necesita un margen superior.

 
 ... 

De acuerdo solo para que sepas lo que pasó entonces, lo arreglé usando algunas clases nuevas como dice Acyra arriba:

 .top5 { margin-top:5px; } .top7 { margin-top:7px; } .top10 { margin-top:10px; } .top15 { margin-top:15px; } .top17 { margin-top:17px; } .top30 { margin-top:30px; } 

cuando quiera, lo hago

para una mejor respuesta, puede agregar margin-top:7% lugar de 5px por ejemplo: D

Bootstrap 3

Si necesita separar filas en bootstrap, simplemente puede usar .form-group . Esto agrega un margen de 15 píxeles al final de la fila.

En su caso, para obtener margen superior, puede agregar esta clase al elemento .row anterior

 
 /* From bootstrap.css */ .form-group { margin-bottom: 15px; } 

Bootstrap 4

Puedes usar las clases de espaciamiento incorporadas

La “t” en el nombre de la clase hace que se aplique solo al lado “superior”, hay clases similares para la parte inferior, izquierda, derecha. El número define el tamaño del espacio.

Algunas veces el margen superior puede causar problemas de diseño:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Por lo tanto, recomiendo crear “clases de margen inferior” en lugar de “clases de margen superior” y aplicarlas al elemento anterior.

Si está utilizando Bootstrap importando archivos LESS Bootstrap, intente definir las clases de margen inferior con espacios temáticos Bootstrap proporcionales:

 .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);} .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} .margin-bottom-md {margin-bottom: @line-height-computed;} .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);} 

Agregué estas clases a mi hoja de estilo bootstrap

 .voffset { margin-top: 2px; } .voffset1 { margin-top: 5px; } .voffset2 { margin-top: 10px; } .voffset3 { margin-top: 15px; } .voffset4 { margin-top: 30px; } .voffset5 { margin-top: 40px; } .voffset6 { margin-top: 60px; } .voffset7 { margin-top: 80px; } .voffset8 { margin-top: 100px; } .voffset9 { margin-top: 150px; } 

Ejemplo

 
 
 
 
 Vertically offset text. 
 
 
  

Estoy usando estas clases para alterar el margen superior:

 .margin-top-05 { margin-top: 0.5em; } .margin-top-10 { margin-top: 1.0em; } .margin-top-15 { margin-top: 1.5em; } .margin-top-20 { margin-top: 2.0em; } .margin-top-25 { margin-top: 2.5em; } .margin-top-30 { margin-top: 3.0em; } 

Cuando necesito un elemento para tener un espaciado de 2em del elemento anterior, lo uso así:

 
Something here 

Si prefiere píxeles, cambie la em a px para que lo haga a su manera.

Para Bootstrap 4, el espaciado debe aplicarse usando

clases de utilidad abreviada

en el siguiente formato:

{propiedad} {lados} – {tamaño}

Donde la propiedad es una de:

• m – para las clases que establecen el margen
• p – para las clases que establecen el relleno

Donde lados es uno de:

• t – para las clases que establecen margin-top o padding-top
• b – para las clases que establecen margen-fondo o relleno-inferior
• l – para las clases que establecen margin-left o padding-left
• r – para las clases que establecen margin-right o padding-right
• x – para las clases que establecen tanto * -file como * -right
• y – para las clases que establecen tanto * -top como * -bottom
• blanco: para las clases que establecen un margen o relleno en los 4 lados del elemento

Donde el tamaño es uno de:

• 0 – para las clases que eliminan el margen o relleno al configurarlo en 0
• 1 – (de manera predeterminada) para las clases que establecen el margen o relleno en $ spacer * .25
• 2 – (de forma predeterminada) para las clases que establecen el margen o relleno en $ spacer * .5
• 3 – (de forma predeterminada) para las clases que establecen el margen o relleno en $ spacer
• 4 – (de forma predeterminada) para las clases que establecen el margen o relleno en $ spacer * 1.5
• 5 – (de forma predeterminada) para las clases que establecen el margen o relleno en $ spacer * 3
• automático: para las clases que configuran el margen en automático

Entonces deberías estar haciendo cualquiera de estos:

 
 
 ... 
 

Lea los documentos para obtener más explicaciones.

Puede usar la siguiente clase para bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4 …

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

Agregue a esta clase en el archivo .css:

 .row { margin-left: -20px; *zoom: 1; margin-top: 50px; } 

o crea una nueva clase y agrégala al elemento

 .rowSpecificFormName td { margin-top: 50px; } 

Bootstrap 4 alpha, para margin-top: abreviatura de nombres de clase CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) para la parte inferior, derecha, izquierda, y también tiene auto clase ml- auto

Las unidades son de 1 a 5 : en las variables.scss lo que significa que si configura mt-1 da .25rem de margen superior.

 $spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: ($spacer-x * .25), y: ($spacer-y * .25) ), 2: ( x: ($spacer-x * .5), y: ($spacer-y * .5) ), 3: ( x: $spacer-x, y: $spacer-y ), 4: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 5: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) ) !default; 

leer más aquí

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Si desea cambiar solo en una página, agregue la siguiente regla de estilo:

  #myCustomDivID .row { margin-top:20px; } 

En Bootstrap 4 alpha + puedes usar esto

 class margin-bottom-5 

Las clases se nombran usando el formato: {property}-{sides}-{size}

 just take a new class beside every row and apply css of margin-top: 20px; here is the code below  
 
 
  

Bootstrap3

CSS (solo canaleta, sin márgenes alrededor):

 .row.row-gutter { margin-bottom: -15px; overflow: hidden; } .row.row-gutter > *[class^="col"] { margin-bottom: 15px; } 

CSS (márgenes iguales alrededor, 15px / 2):

 .row.row-margins { padding-top: 7px; /* or margin-top: 7px; */ padding-bottom: 7px; /* or margin-bottom: 7px; */ } .row.row-margins > *[class^="col"] { margin-top: 8px; margin-bottom: 8px; } 

Uso:

 
 
first
 
second
 
third
  

(con SASS o LESS 15px podría ser una variable de bootstrap)

puedes agregar este código:

 [class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; } 

Simplemente use este bs3-upgrade para espaciamientos y alineación de texto …

https://github.com/studija/bs3-upgrade

Mi truco No tan limpio, pero funciona bien para mí