CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
FrenkyB
FrenkyB

Reputation: 7197

Space between buttons with bootstrap class

I have a problem with three buttons on my site. I would like to have some space between those buttons. Is it possible to do this, without using inline styling? Perhaps bootstrap has some classes for this?

I know I can simply do it with:

style='margin-right:5px;'

or write custom class with this property.

I am just wondering if bootstrap has some classes for this?

Here is example.

Problem is with this three buttons:

<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>

Upvotes: 3

Views: 10240

Answers (4)

Wakil Ahmed
Wakil Ahmed

Reputation: 1393

d-flex justify-content-between

<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
    <button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
    <a href="" class="btn btn-secondary">Reset</a>
</div>

Will work like magic.

Upvotes: 0

Sandwell
Sandwell

Reputation: 1457

Yes you have to wrap them

<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>

EDITED CODEPEN

Upvotes: 4

Akash Agrawal
Akash Agrawal

Reputation: 2299

<div class="btn-toolbar">
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
    </div>

Upvotes: 1

janfitz
janfitz

Reputation: 1343

Try to put them inside btn-toolbar or some other container.

 <div class="btn-toolbar">
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
 </div>

Upvotes: 4

Related Questions