36

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?

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <div class="row" id="b">
      <button>..</button>
    <div>

Now my solution is insert a tag of h1,I think it is not graceful.

   <div class="row" id="a">
      <img> ... </img>
    <div>
    <h1></h1>
    <div class="row" id="b">
      <button>..</button>
    <div>

Does it have more graceful solution?

jgillich
  • 71,459
  • 6
  • 57
  • 85
wcc526
  • 3,915
  • 2
  • 31
  • 29
  • 1
    possible duplicate of [Twitter Bootstrap - add top space between rows](http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows) – Dan Jun 19 '14 at 15:06

6 Answers6

32

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

<div class="row row-m-t"></div>
m.edmondson
  • 30,382
  • 27
  • 123
  • 206
Sachin
  • 40,216
  • 7
  • 90
  • 102
  • 20
    I wouldn't edit the `.row` class like this since `.row` is used throughout bootstrap 3. Better to create a new class like `.row-margin` – Dan Jun 19 '14 at 15:04
  • Yes @Dan I agreed to your point but this is all depend on the requirement. If I want to every row class then I would use it, otherwise I will create new. btw it's just an example.. – Sachin Jun 19 '14 at 15:07
  • 1
    I don't think define row css is good idea,Why not bootstrap give a better solution,they have already define the col-md-offset,why not define rol-md-offset-* again? – wcc526 Jun 19 '14 at 15:29
  • modifying the row class is an anti-pattern since it is a fundamental part of bootstrap scaffolding. create a css class for the purpose or use other bootstrap classes that add vertical margin for example form-group. – Daniel Leiszen Feb 14 '15 at 22:02
  • I totally agree with you Dan. You can go even further and do custom css class names like .row-margin-sm, .row-margin-md, .row-margin-lg, etc.. and just plug them in where needed. It does no harm to the original bootstrap framework - they are simply custom helper classes. – klewis May 06 '16 at 14:06
  • What if I'm using a CDN for bootstrap :) – Sorter May 20 '17 at 15:25
  • @Sorter you can add an additional style declaration or even inline CSS – eckes Mar 05 '19 at 09:15
30

use:

<div class="row form-group"></div>
Ahmad Behjati
  • 536
  • 6
  • 4
  • can't believe this, adding margin could be so hard, Thanks – Yene Mulatu Feb 09 '18 at 13:59
  • Thanks for this. It always bothered me how the docs would show the grid layout with spacing between the rows, but that's not how it actually is :/ – Joseph Jun 04 '19 at 17:27
15

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;
}
MCollard
  • 926
  • 2
  • 20
  • 39
Dasun
  • 3,244
  • 1
  • 29
  • 40
  • 2
    Best solution, although the naming should follow bootstrap guidelines: class="row row-gutter" – Eldblom Dec 02 '16 at 00:16
9

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

Orlando
  • 9,374
  • 3
  • 56
  • 53
-1

Use <br> tags

<div class="container">   
    <div class="row" id="a">
        <img src="http://placehold.it/300">
    </div>

    <br><br> <!--insert one, two, or more here-->

    <div class="row" id="b">
      <button>Hello</button>
    </div>
</div>
Dan
  • 9,391
  • 5
  • 41
  • 73
  • 3
    Why downvote?
    tags are recommended in bootstrap documentation http://getbootstrap.com/css/#type-addresses     – Dan Jun 19 '14 at 15:02
  • 1
    I think add br is good idea,it is better than add h1 tag.But why not bootstrap give a better solution,they have already define the col-md-offset,why not define rol-md-offset-* again? – wcc526 Jun 19 '14 at 15:28
  • 1
    I'm not sure what you mean, the col-md-offset applies to horizontal spacing. They didn't create anything like that for vertical spacing because it doesn't make sense to constrain vertical spacing in the same way as horizontal spacing. – Dan Jun 19 '14 at 16:53
  • 11
    should be used to preserve line breaks in text, where the division of lines are sigificant much like your example, addresses. It should not be used to increase a gap, where instead margin or padding should be used. However notably unfortunately my comment doesn't help with boostrap - but it's generally applicable to CSS / html https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br – Alex KeySmith Mar 29 '15 at 15:26
  • 1
    The site Alex KeySmith linked says: "Do not use
    to increase the gap between lines of text; use the CSS margin property or the

    element."

     – Juuro Nov 25 '15 at 14:14
  • 2
    Never format with HTML! HTML is for the DOM **structure**. CSS for the **formattings**. – fabpico Apr 15 '16 at 11:56
  • 2
    Just to clarify, the official Bootstrap documentation does **not** recommend using
    tags to add space between elements. The documentation uses them to add line breaks to text flow, which is the correct usage.     – JJJ Feb 03 '17 at 13:14
  • @JJJ I agree...I wrote this answer a while ago. I didn't know this at the time. Thank you – Dan Feb 03 '17 at 18:58
-5

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.

Den Duka
  • 1
  • 1