CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Sean Lindo
Sean Lindo

Reputation: 1437

Adding spacing between rows of Bootstrap buttons

I have a number of buttons inside of a Bootstrap button toolbar that is breaking over to a new row. This is fine, but there is no spacing between these rows, how can I add that without explicitly creating new rows ahead of time?

Codepen Here 

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="btn-toolbar" role="toolbar">
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1611

Answers (3)

nimish
nimish

Reputation: 167

.btn-toolbar>.btn{
    margin-bottom: 5px;
}

The above code will make equal spacing around all the buttons.Also let me know if any issue.

Even if you create a whole row consist of all buttons then according to your layout you can increase the margin bottom so that it will create enough space for your layout.

Upvotes: 1

Rafiqul Islam
Rafiqul Islam

Reputation: 961

add custom css:

.btn{
  margin:3px !important;
}

Upvotes: 2

Andy G
Andy G

Reputation: 19367

I would probably add a little bootstrap customization:

.btn-toolbar .btn-default {
  margin-top: 3px;
}

Upvotes: 1

Related Questions