htmlcsstwitter-bootstraptwitter-bootstrap-3buttongroup

How I can make nice looking matrix of buttons with Bootstrap 3?


I have something like that:

<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>

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):

<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>

How I can make it? Maybe I need to add some Bootstrap class or edit the CSS file?


Solution

  • One group of buttons + few pseudo-classes

    1. Use only one block with the .btn-group class.

    2. Apply a set of CSS properties by using of pseudo-classes:

    1. The clear: left; property forces the button to start a new row of the matrix. It's because the .btn class has the float: left; property.

    2. Set up border-radius and margin properties in a similar way as the btn-group class is described in the bootstrap.css file.

    Three column button matrix with Bootstrap 3

    https://codepen.io/glebkema/pen/bGWWMRz

    @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css";
    
    /* Arrange buttons */
    .btn-matrix>.btn {
      width: 33%; /* force buttons to have the same width regardless of content */
    }
    .btn-matrix>.btn:nth-child(3n + 4) {
      clear: left; /* force the button to start a new row of the matrix
                      (because .btn adds the `float: left;` property) */
      margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
    }
    .btn-matrix>.btn:nth-child(n + 4) {
      margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
    }
    
    /* Fix border radius */
    .btn-matrix>.btn:first-child {
      border-bottom-left-radius: 0;
    }
    .btn-matrix>.btn:nth-child(3) {
      border-top-right-radius: 4px !important;
    }
    .btn-matrix>.btn:nth-last-child(3) {
      border-bottom-left-radius: 4px !important;
    }
    .btn-matrix>.btn:last-child {
      border-top-right-radius: 0;
    }
    
    /* Decorations */
    .btn-matrix {
      margin: 20px;
    }
    <div class="btn-group btn-matrix">
      <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>
      <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>
      <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>
      <button type="button" class="btn btn-default">Button 10</button>
      <button type="button" class="btn btn-default">Button 11</button>
      <button type="button" class="btn btn-default">Button 12</button>
      <button type="button" class="btn btn-default">Button 13</button>
      <button type="button" class="btn btn-default">Button 14</button>
      <button type="button" class="btn btn-default">Button 15</button>
    </div>

    X×Y matrix with Bootstrap 3

    The code depends only on X:

    .btn-matrix > .btn {
      width: (100/X)%;
    }
    .btn-matrix > .btn:nth-child(Xn+X+1) {
      clear: left;
      margin-left: 0;
    }
    .btn-matrix > .btn:nth-child(n+X+1) {
      margin-top: -1px;
    }
    
    .btn-matrix > .btn:first-child {
      border-bottom-left-radius: 0;
    }
    .btn-matrix > .btn:nth-child(X) {
      border-top-right-radius: 4px !important;
    }
    .btn-matrix > .btn:nth-last-child(X) {
      border-bottom-left-radius: 4px !important;
    }
    .btn-matrix > .btn:last-child {
      border-top-right-radius: 0;
    }
    

    Three column button matrix with Bootstrap 4 or 5

    https://codepen.io/glebkema/pen/ZEKKoJG

    @import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css";
    
    /* Arrange buttons */
    .btn-matrix {
       flex-wrap: wrap; /* allow buttons to jump to another row */
    }
    .btn-matrix > .btn {
       width: 33%; /* force buttons to have the same width regardless of content */
    }
    .btn-matrix > .btn:nth-child(3n + 4) {
       margin-left: 0; /* because .btn-group adds `margin-left: -1px;` to all buttons */
    }
    .btn-matrix > .btn:nth-child(n + 4) {
       margin-top: -1px; /* superimpose borders of the buttons from adjacent rows */
    }
    
    /* Fix border radius */
    .btn-matrix > .btn:first-child {
       border-bottom-left-radius: 0;
    }
    .btn-matrix > .btn:nth-child(3) {
       border-top-right-radius: 4px !important;
    }
    .btn-matrix > .btn:nth-last-child(3) {
       border-bottom-left-radius: 4px !important;
    }
    .btn-matrix > .btn:last-child {
       border-top-right-radius: 0;
    }
    
    /* Decorations */
    .btn-matrix {
       margin: 20px;
       max-width: 500px;
    }
    <div class="btn-group btn-matrix" role="group" aria-label="Three Column Button Matrix">
      <button type="button" class="btn btn-outline-primary">Button 1</button>
      <button type="button" class="btn btn-outline-primary">Button 2</button>
      <button type="button" class="btn btn-outline-primary">Button 3</button>
      <button type="button" class="btn btn-outline-primary">Button 4</button>
      <button type="button" class="btn btn-outline-primary">Button 5</button>
      <button type="button" class="btn btn-outline-primary">Button 6</button>
      <button type="button" class="btn btn-outline-primary">Button 7</button>
      <button type="button" class="btn btn-outline-primary">Button 8</button>
      <button type="button" class="btn btn-outline-primary">Button 9</button>
      <button type="button" class="btn btn-outline-primary">Button 10</button>
      <button type="button" class="btn btn-outline-primary">Button 11</button>
      <button type="button" class="btn btn-outline-primary">Button 12</button>
      <button type="button" class="btn btn-outline-primary">Button 13</button>
      <button type="button" class="btn btn-outline-primary">Button 14</button>
      <button type="button" class="btn btn-outline-primary">Button 15</button>
    </div>

    X×Y matrix with Bootstrap 4 or 5

    The code depends only on X:

    .btn-matrix {
      flex-wrap: wrap;
    }
    .btn-matrix > .btn {
      width: (100/X)%;
    }
    .btn-matrix > .btn:nth-child(Xn+X+1) {
      margin-left: 0;
    }
    .btn-matrix > .btn:nth-child(n+X+1) {
      margin-top: -1px;
    }
    
    .btn-matrix > .btn:first-child {
      border-bottom-left-radius: 0;
    }
    .btn-matrix > .btn:nth-child(X) {
      border-top-right-radius: 4px !important;
    }
    .btn-matrix > .btn:nth-last-child(X) {
      border-bottom-left-radius: 4px !important;
    }
    .btn-matrix > .btn:last-child {
      border-top-right-radius: 0;
    }