¿Cómo puedo hacer una bonita matriz de botones con Bootstrap 3?
Tengo algo asi:
<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>
Y me gustaría tener una matriz de botones 3x3. Una cosa más, el lado izquierdo y derecho debe verse como este ejemplo (líneas rectas):
<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>
¿Cómo puedo hacerlo? ¿Quizás necesito agregar alguna clase de bootstrap o editar el archivo css?