Como posso criar uma matriz de botões bonita com o bootstrap 3?
Eu tenho algo assim:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
E eu gostaria de ter matriz de botões 3x3. Mais uma coisa, os lados esquerdo e direito devem se parecer com este exemplo (linhas retas):
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">button</button>
<button type="button" class="btn btn-default">button</button>
<button type="button" class="btn btn-default">button</button>
</div>
</div>
Como eu posso fazer isso? Talvez eu precise adicionar alguma classe de inicialização ou editar o arquivo css?