In Bootstrap 3 How to change the distance between rows in vertical

Question

I have two rows a and b I think the distance between the two rows in vertical is too small   I want to make the distance more bigger I know I can change the distance in horizontal by col-md-offset-  But how to change the vertical distance       lt div class  row  id  a  gt         lt img gt       lt  img gt       lt div gt       lt div class  row  id  b  gt         lt button gt    lt  button gt       lt div gt    Now my solution is insert a tag of h1 I think it is not graceful       lt div class  row  id  a  gt         lt img gt       lt  img gt       lt div gt       lt h1 gt  lt  h1 gt       lt div class  row  id  b  gt         lt button gt    lt  button gt       lt div gt    Does it have more graceful solution

User · Answer

If it was me I would introduce new CSS class and use along with unmodified bootstrap row class.

HTML

<div class="row extra-bottom-padding" id="a">
   <img>...</img>
<div>
<div class="row" id="b">
   <button>..</button>
<div>

CSS

.row.extra-bottom-padding{
   margin-bottom: 20px;
}

User · Answer

Use  lt br gt  tags   lt div class  container  gt          lt div class  row  id  a  gt           lt img src  http   placehold it 300  gt       lt  div gt        lt br gt  lt br gt   lt  --insert one  two  or more here-- gt        lt div class  row  id  b  gt         lt button gt Hello lt  button gt       lt  div gt   lt  div gt

User · Answer

use    lt div class  row form-group  gt  lt  div gt

User · Answer

UPDATE  Bootstrap 4 has spacing utilities to handle this https   getbootstrap com docs 4 0 utilities spacing    mt-0     margin-top  0  important      --  ORIGINAL ANSWER  If you are using SASS  this is what I normally do    margins   xs  0 5rem  sm  1rem  md  1 5rem  lg  2rem  xl  2 5rem     each  name   value in  margins      margin-top-   name        margin-top   value          margin-bottom-   name        margin-bottom   value          so you can later use margin-top-xs for example

User · Answer

There s a simply way of doing it  You define for all the rows  except the first one  the following class with properties    not-first-row      position  relative     top  -20px      Then you apply the class to all non-first rows and adjust the negative top value to fit your desired row space  It s easy and works way better     Hope it helped

User · Answer

Instead of adding any tag which is never a good solution  You can always use margin property with the required element    You can add the margin on row class itself  So it will affect globally    row    margin-top  30px    margin-bottom  30px     Update  Better solution in all cases would be to introduce a new class and then use it along with  row class    row-m-t    margin-top   20px     Then use it wherever you want   lt div class  row row-m-t  gt  lt  div gt

[html] In Bootstrap 3,How to change the distance between rows in vertical?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3