Create a list of button which is the same width

Question

The effect I would like to create is like this

On desktop, there are case that have 1 to 3 buttons.

If 3 buttons , it should match the full width of the body , and leave a margin between button.

If less than 3 buttons , it should align center.

|[button 1] [button 2] [button 3]|

|       [button 1] [button 2]    |

On Mobile , no matter how many buttons, align center

|       [button 1]    |
|       [button 2]    |
|       [button 3]    |

I have developed using bootstrap grid, but it seems not suitable for dynamic case:

<div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
  <a class="btn btn-blue get_loc">button 1</a>
</div>
<div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
  <a class="btn btn-blue get_loc">button 2</a>
</div>
<div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
  <a class="btn btn-blue get_loc">button 3</a>
</div>

How to modify or simply using CSS is better for this case? Thanks a lot for helping.

score 1 · Answer 1 · answered Mar 13 '16 at 09:22

1

Then you can play with some media-query for mobile.

https://codepen.io/anon/pen/wGzgOX

.button{
border: 1px solid black;
margin: 0 auto;
display:inline-block;
}
.cont{
text-align: center;
}

answered Mar 13 '16 at 09:22

Valex

990
7
13

Mosh Feu · Accepted Answer · 2016-03-13T10:03:01.130

If you can use flex, (you can check here) So you can use the following css:

.same-width-button {
  text-align:center !important;
  float:none !important;
  flex:1;
}

@media (min-width: 768px) {
  .row {
    display:flex;  
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
  <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
    <a class="btn btn-default get_loc">button 1</a>
  </div>
  <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
    <a class="btn btn-default get_loc">button 2</a>
  </div>
  <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
    <a class="btn btn-default get_loc">button 3</a>
  </div>
</div>
<hr />
<div class="row text-center">
  <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
    <a class="btn btn-default get_loc">button 1</a>
  </div>
  <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button">
    <a class="btn btn-default get_loc">button 2</a>
  </div>
</div>

http://jsbin.com/cubebu/edit?html,css

score 1 · Answer 3 · answered Mar 13 '16 at 09:35

This is a case were the easiest solution – while keeping the bootstrap grid philosophy – would be to add the appropriate class (wherever you output that HTML code or create those DOM elements) to offset the columns.

Assuming you want your buttons to always be 4 columns wide on desktop, you would simply add the proper offsetting class to the first of your columns, .col-sm-offset-2 ((12 - 2 * 4)/2) for two, and .col-sm-offset-4 ((12 - 1 * 4)/2) for only one button.

If adding those classes dynamically is not an option you might get there with the help of a technique called Quantity Queries for CSS.

Create a list of button which is the same width

3 Answers3