How to set same margin for buttons in row by bootstrap

Question

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;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

.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>

How to set same margin for buttons in row by bootstrap

Sign up