Edit in JSFiddle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<div id="vue-app" class="container">
  <h1 class="heading text-center">VUE WIN</h1>
  
  <div class="row">
    <div class="col-sm-6">
      <h2>ME: <small>10 &euro;</small></h2>
      <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 10%"></div>
      </div>
    </div>
    
    <div class="col-sm-6">
      <h2>BANK: <small>50 &euro;</small></h2>
      <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%"></div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-12 rounded game-box text-center">
    <button type="button" class="btn btn-success">Start New Game?</button>
  </div>
    
  <div class="col-sm-12 rounded game-box text-center">
   <h3 class="random-num-heading">RANDOM NUMBER IS: <span class="badge badge-info random-num">&nbsp;</span></h3> 
 
    <div class="form-group row">
      <label for="your-bet" class="col-sm-3 col-form-label">Your Bet</label>
      <div class="col-sm-6">
        <input type="number" class="form-control" id="your-bet" placeholder="&euro;">
        <div class="invalid-feedback" style="display:block;">
          Your bet can't be zero. You can't bet more money than you or bank have.
        </div>
      </div>
    </div>
    
    <p>on number from each range?</p>
  
    <button type="button" class="btn btn-warning bet-btn">0 - 33</button>
    <button type="button" class="btn btn-warning bet-btn">34 - 66</button>
    <button type="button" class="btn btn-warning bet-btn">67 - 100</button>
  </div>
  
  <div class="col-sm-12 rounded game-box text-center">
    <button type="button" class="btn btn-success">New Bet?</button>
  </div>
</div>

.heading {
  padding-bottom:1rem;
  margin:1rem 0;
  border-bottom:1px solid #ddd;
}
.game-box {
  padding:1rem;
  margin-top:1rem;
  margin-bottom:1rem;
  border:1px solid #ddd;
}
.bet-btn {
  margin:0 1rem;
}
.random-num-heading {
  margin-bottom:1rem;
}
.random-num {
  display:inline-block;
  min-width:2rem;
  animation-duration: 1s;
  animation-name: rotating;
}
@keyframes rotating {
  0% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  25% { -ms-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(130deg); }
  50% { -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }
  75% { -ms-transform: rotate(160deg); -webkit-transform: rotate(160deg); transform: rotate(160deg); }
  100% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}