Rasťo Rasťo - 2 years ago 190
CSS Question

How to set same margin for buttons in row by bootstrap

as title says, that is my problem.
I want something like margin:auto .

this is my html file

<div class="container-fluid clenovia-button">
<div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Tréneri</button></div>
<div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Muži</button></div>
<div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Juniori</button></div>
<div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Dorastenci</button></div>
<div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Starší žiaci</button></div>
<div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Mladší žiaci</button></div>
<div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Prípravka</button></div>
</div>


this is my css file

.clenovia-button{
display: inline-block;
margin: auto;
}
.clenovia-button button{
padding: 3px;
}

Answer Source

.btn-primary-spacing 
{
margin-right: 3px;
margin-bottom: 3px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-sm- col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
Tréneri
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  Muži
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  Juniori
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  Dorastenci
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
 Starší žiaci
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  Mladší žiaci
</button>
</div>

<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
Prípravka
</button>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download