CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Lachlan
Lachlan

Reputation: 1282

Bootstrap: Buttons in a row with no gap between

I'm new to this. I'm trying to make a row of buttons in Bootstrap with no gap in between, but trying to adjust margin and padding settings makes no difference, so I think it's something else. enter image description here

<div class="row text-center">
  <div class="col-xs-2">
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button>
  </div>
  <div class="col-xs-2">
    <button class="btn"><a href="y"><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i></a></button>
  </div>
  <div class="col-xs-2">
    <button class="btn"><a href="z"><i class="fa fa-stack-exchange fa-2x" aria-hidden="true"></i></a></button>
  </div>
  <div class="col-xs-2">
    <button class="btn"><a href="x"><i class="fa fa-quora fa-2x" aria-hidden="true"></i></a></button>
  </div>
  <div class="col-xs-2">
    <button class="btn"><a href="y"><i class="fa fa-reddit-alien fa-2x" aria-hidden="true"></i></a></button>
  </div>
  <div class="col-xs-2">
    <button class="btn"><a href="z"><i class="fa fa-free-code-camp fa-2x" aria-hidden="true"></i></a></button>
  </div>
</div>

Anyone know what I'm doing wrong?

Upvotes: 0

Views: 1501

Answers (2)

Maulik
Maulik

Reputation: 379

Bro please provide CSS for every id's and classes so that we can get idea.

Or you can put your all buttons in single col-md-12 like

<div class="row">
<div class="col-md-12">
Add buttons
</div>
</div>

Upvotes: 1

claudios
claudios

Reputation: 6656

Gaps are shown because you put each button inside each col-xs-2. The col in bootstrap has its own width. To solve your issue, try to create just 1 column and call it col-xs-12 and put all your buttons there.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row text-center">
  <div class="col-xs-12">
     <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button>
     <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button>
     <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button>
     <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button>
     <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions