How to make buttons the same size and center them all on the page?

I am using Bootstrap 3 and have 3 buttons of different sizes. I try to make them the same in size (depending on the size of the largest), and then center them all in the middle of the page with the space between them. The buttons either do not have the same size or do not have a space between them. I want the buttons to be dynamic, so I don’t want them to fit a specific pixel width.

Failed to try 1:

<div class="container">
  <div class="btn-group blocks" data-toggle="buttons">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle Button</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

.blocks,
.btn {
  padding: 24px 12px;
  margin: 5px 10px 5px 10px;
  border-radius: 0;
}

.container {
  background-color: pink;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

Failed to try 2:

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 buttons-container">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default middle-btn">Middle Button</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
  </div>
  <div class="col-md-4"></div>
</div>

.btn {
  padding: 24px 12px !important;
  margin: 5px 10px 5px 10px;
  border-radius: 0;
}
+4
source share
1 answer

Try this code:

.blocks,
.btn {
  padding: 24px 12px;
  margin: 5px 10px 5px 10px;
  border-radius: 0;  
}

.blocks {width:100%;}

.btn {max-width:150px;width:100%;}

.container {
  background-color: pink;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

try1: jsfiddle link: https://jsfiddle.net/Loxn91oq/4/ try2: jsfiddle link: https://jsfiddle.net/ogdfLq9c/

+2

Source: https://habr.com/ru/post/1620662/


All Articles