CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bsky
bsky

Reputation: 20222

Grid of buttons with small spacings between them

I would like to create a grid of buttons much like this one:

enter image description here

After looking at this question How to set up a grid of buttons in bootstrap? I added this in the cssfile:

#channels button {
   float: left;
   width: auto;
}

And these buttons to the html file:

  <div id="channels" className="span12">
    <div className="btn-group">
      <button type="button" className="btn btn-default" id="channel">
        A
      </button>

      <button type="button" className="btn btn-default" id="channel">
        B
      </button>
    </div>
  </div>

However, I am not getting any spacing:

enter image description here

So how can I create such a grid?

Upvotes: 0

Views: 69

Answers (2)

Fernando Torres
Fernando Torres

Reputation: 470

This is because you are not using the ROWS and Cols of bootstrap.

Using a row and col, you can determinate how many columns you want and give them until 12 rows. Like:

    <div class="row">
        <div class="col-lg-6">
              <button type="button" className="btn btn-default" id="channel">
                A
              </button>
        </div>

        <div class="col-lg-6">
          <button type="button" className="btn btn-default" id="channel">
            B
          </button>
        </div>
    </div>

And this gonna give you two buttons separate because you have 6 cols in one button and 6 cols in other buttons. If you want something like the image, you have to:

<div>
    <div class="row">
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                SAFE
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                FUN 
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                FRIENDLY
              </button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                SNOW
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                BEACH 
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                SURFING
              </button>
        </div>
    </div>
</div>

As you can see, we were distribute peer row 3 columns with 4 cols, because 4 * 3 = 12 columns on the Grid System. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

For more about it, please visit http://getbootstrap.com/css/#grid for learn GRID of Bootstrap.

Upvotes: 1

Wowsk
Wowsk

Reputation: 3675

Give each button margin, which will space it out. The twitter bootstrap has buttons with a default margin of 0 so that is why there is currently no spacing.

P.S. You should not have two elements with the same id.

.channel{
  margin:10px;  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="channels" className="span12">
    <div className="btn-group">
      <button type="button" className="btn btn-default" class="channel">
        A
      </button>

      <button type="button" className="btn btn-default" class="channel">
        B
      </button>
    </div>
  </div>

Upvotes: 1

Related Questions