title: How to make a rectangle centered AND responsive with Bootstrap?
body: <p>I'm trying to make a board-game adoption for web. 
  I want to use Bootstrap to make the elements responsive. </p>
  
  <p>The main element of the game is a rectangle (the game board). This shall appear centered in all display-sizes and with a bit of margin to all sides.</p>
  
  <p>Which attributes and CSS-rules do I have to apply?
  Shall I use a normal container or container-fluid?</p>
  
  <p>Would it be enough to make one column within the container / row and give it a class of "col-xs-12"? </p>
  
  <p>As far as I know this would be applied to all devices beginning from the smallest to the largest upwards.</p>
  
  <p>What I have tried so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
  }
  
  .container {
    margin: 10px auto;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: #ababab;
  }
  
  .row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .board {
    margin: 10px;
    height: 400px;
    width: calc(100% - 40px);
    background-color: teal;
    border: 1px solid black;
    font-size: 2.5em;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 board"&gt;The game-board&lt;/div&gt;   
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>