How I can make nice looking matrix of buttons with Bootstrap 3?
<p>I have something like that:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6"&gt;

      &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 1&lt;/button&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 2&lt;/button&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 3&lt;/button&gt;
      &lt;/div&gt;

      &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 4&lt;/button&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 5&lt;/button&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 6&lt;/button&gt;
      &lt;/div&gt;

      &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 7&lt;/button&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 8&lt;/button&gt;
        &lt;button type="button" class="btn btn-default"&gt;Button 9&lt;/button&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="col-sm-6"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>And I would like to have a 3x3 matrix of buttons. One more thing, left and right side must look like this example (straight lines):</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;div class="container"&gt;
  &lt;div class="btn-group-vertical"&gt;
    &lt;button type="button" class="btn btn-default"&gt;button&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;button&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>How I can make it? Maybe I need to add some Bootstrap class or edit the CSS file?</p>