Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<div style="width:150px; background-color: lightgreen">  
    <a class="btn btn-primary flex-fill foo">some text in button </a>
  
  <!--<div class="row mb-1">
    <a class="btn btn-primary flex-fill">some text in button</a>
  </div>
  <div class="row mb-1">
    <a class="btn btn-primary flex-fill">some text in button</a>
  </div>
  <div class="row mb-1">
    <a class="btn btn-primary flex-fill">some text in button</a>
  </div>
  <div class="row mb-1">
    <a class="btn btn-primary flex-fill">some text in button</a>
  </div>
  <div class="row mb-1">
    <a class="btn btn-primary flex-fill">some text in button</a>
  </div>-->
</div>

CSS

body {
    margin: 10px;    
}

.foo {
  word-wrap: break-word;
  width: 100%;
  white-space: normal;
}