<div class='container text-center'> 
  <div class="simpl-btn">
     <h3 class="text-center">Buttons</h3>
     <button class="btn btn-primary">Button primary</button>
    <button class="btn btn-default">Button default</button>
    <button class="btn btn-danger">Button danger</button>
    <button class="btn btn-info">Button info</button>
    <button class="btn btn-warning">Button warning</button>
    <button class="btn btn-dark">Button dark</button>
    <button class="btn btn-success">Button success</button>
  </div>
  <br></br></br>

<div class="secondary-btn">
  <h3 class="text-center">Buttons outline</h3>
     <button class="btn btn-outline-primary">Button primary</button>
    <button class="btn btn-outline-secondary">Button default</button>
    <button class="btn btn-outline-danger">Button danger</button>
    <button class="btn btn-outline-info">Button info</button>
    <button class="btn btn-outline-warning">Button warning</button>
    <button class="btn btn-outline-dark">Button dark</button>
    <button class="btn btn-outline-success">Button success</button>
    
 <br></br></br>
</div>

  <h3 class="text-center">Buttons Group</h3>
    <div class="btn-group" role="group" aria-label="Basic example">
      <button class="btn btn-primary">Button1</button>
      <button class="btn btn-primary">Button2</button>
      <button class="btn btn-primary">Button 3</button>
      <button class="btn btn-primary">Button 4</button>
      <button class="btn btn-primary">Button 5</button>
      <button class="btn btn-primary">Button 6</button>
      <button class="btn btn-primary">Button 7</button>
    </div>

<div class="btn-size">
    <h3 class="text-center">Buttons'Size</h3>
<!--     // button large -->
<button class="btn btn-primary btn-lg">button large</button>
<!-- // small button -->
<button class="btn btn-danger btn-sm">small button</button>
<!-- // button block -->
<button class="btn btn-success btn-block">button block</button>
</div>  
  <div>

.simple-btn button,
.btn-size,
.secondary-btn button{
  margin:10px;
}