How to make buttons wrap images and reduce spacing between them with bootstrap? - Twitter bootstrap

JueDebutat
January 14, 2017
252 views
0 votes
2 Answers

I’ve got some bootstrap code that produces the image above:

.top-buffer-sma {
  margin-top: 22px;
}
.top-buffer-med {
  margin-top: 33px;
}
.top-buffer-big {
  margin-top: 50px;
}
.img-responsive {
  margin: 0 auto;
}
.btn {
  height: auto;
  width: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  background-image: none;
  border: 0 none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
  border: 0 none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row top-buffer-sma">
  <div class="btn-group btn-group-justified" role="group">

    <div class="btn-group" role="group">
      <button onclick="location.href = 'http://steamcommunity.com/groups/BTBGUK';" type="button" class="btn">
        <img src="img/steam.png" class="img-responsive" alt="Steam">
      </button>
    </div>

    <div class="btn-group" role="group">
      <button onclick="location.href = 'https://www.facebook.com/BackToBasicsGaming?ref=hl';" type="button" class="btn">
        <img src="img/facebook.png" class="img-responsive" alt="Facebook">
      </button>
    </div>

    <div class="btn-group" role="group">
      <button onclick="location.href = 'https://twitter.com/DanPlanetTerra';" type="button" class="btn">
        <img src="img/twitter.png" class="img-responsive" alt="Twitter">
      </button>
    </div>

    <div class="btn-group" role="group">
      <button onclick="location.href = 'https://www.youtube.com/channel/UCwNckSSF-y5SAOtLPU6Qfrg?view_as=public';" type="button" class="btn">
        <img src="img/youtube.png" class="img-responsive" alt="YouTube">
      </button>
    </div>

    <div class="btn-group" role="group">
      <button onclick="location.href = 'https://plus.google.com/u/0/103627402461915246566/posts/p/pub';" type="button" class="btn">
        <img src="img/googleplus.png" class="img-responsive" alt="Google+">
      </button>
    </div>

  </div>
</div>

How am I able to make the buttons that contain img of class img-responsive to completely wrap their contents (img) but also reduce the spacing between them?

I want it to be more like:

No spacing

Answers

The major problem is you’re using too many btn-group in your html, see this updated snippet:

.top-buffer-sma {
  margin-top: 22px;
  text-align: center;
}
.top-buffer-med {
  margin-top: 33px;
}
.top-buffer-big {
  margin-top: 50px;
}
.img-responsive {
  margin: 0 auto;
}
.btn {
  height: auto;
  width: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  background-image: none;
  border: 0 none;
  padding: 1px !important;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
  border: 0 none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="top-buffer-sma">
  <div class="btn-group" role="group">
    <button onclick="location.href = 'http://steamcommunity.com/groups/BTBGUK';" type="button" class="btn">
      <img src="http://downloadicons.net/sites/default/files/steam-icon-4332.png" class="img-responsive" alt="Steam">
    </button>

    <button onclick="location.href = 'https://www.facebook.com/BackToBasicsGaming?ref=hl';" type="button" class="btn">
      <img src="https://www.geeksaresexy.net/wp-content/themes/geeksaresexy/images/socialmedia/facebook.png" class="img-responsive" alt="Facebook">
    </button>

    <button onclick="location.href = 'https://twitter.com/DanPlanetTerra';" type="button" class="btn">
      <img src="https://www.theautismdad.com/wp-content/plugins/wordpress-social-login/assets/img/32x32/wpzoom//twitter.png" class="img-responsive" alt="Twitter">
    </button>

    <button onclick="location.href = 'https://www.youtube.com/channel/UCwNckSSF-y5SAOtLPU6Qfrg?view_as=public';" type="button" class="btn">
      <img src="http://foxsyracuse.com/images/yticon.png" class="img-responsive" alt="YouTube">
    </button>

    <button onclick="location.href = 'https://plus.google.com/u/0/103627402461915246566/posts/p/pub';" type="button" class="btn">
      <img src="http://onlinepbe.com/images/google.png" class="img-responsive" alt="Google+">
    </button>
  </div>
</div>

Wrap buttons inside a flex container and give .btn class margin:2px (2px as example) & padding:0; (then adjust space in between with button.btn margin as desired)

/* added flex container */
.container {
  border: 1px solid lightgray;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  /* comment fixed width if you want full row width */
  width: 320px;
}
button.btn {
  height: auto;
  width: auto;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  background-image: none;
  border: 0 none;
  /* added these */
  margin: 2px;
  padding: 0;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
  border: 0 none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="btn-group" role="group">
    <button onclick="location.href = 'http://steamcommunity.com/groups/BTBGUK';" type="button" class="btn">
      <img src="img/steam.png" class="img-responsive" alt="Steam">
    </button>
  </div>
  <div class="btn-group" role="group">
    <button onclick="location.href = 'https://www.facebook.com/BackToBasicsGaming?ref=hl';" type="button" class="btn">
      <img src="img/facebook.png" class="img-responsive" alt="Facebook">
    </button>
  </div>
  <div class="btn-group" role="group">
    <button onclick="location.href = 'https://twitter.com/DanPlanetTerra';" type="button" class="btn">
      <img src="img/twitter.png" class="img-responsive" alt="Twitter">
    </button>
  </div>
  <div class="btn-group" role="group">
    <button onclick="location.href = 'https://www.youtube.com/channel/UCwNckSSF-y5SAOtLPU6Qfrg?view_as=public';" type="button" class="btn">
      <img src="img/youtube.png" class="img-responsive" alt="YouTube">
    </button>
  </div>
  <div class="btn-group" role="group">
    <button onclick="location.href = 'https://plus.google.com/u/0/103627402461915246566/posts/p/pub';" type="button" class="btn">
      <img src="img/googleplus.png" class="img-responsive" alt="Google+">
    </button>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

How to make buttons wrap images and reduce spacing between them with bootstrap? – Twitter bootstrap

Answers