title: Express JS - unable to center text in a DIV in a pug template with Bootstrap
body: <p>I am working on an Express JS web app based on Bootstrap 4 styling as front-end. </p>
  
  <p>No custom stylesheet is involved.</p>
  
  <p>My HTML with Bootstrap 4 styling:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row text-center"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="grid-container"&gt;
                  &lt;div&gt;&lt;a class="btn btn-primary btn-lg btn-block" href="items/addItem"&gt;Add a New Item&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="grid-container"&gt;
                  &lt;div&gt;&lt;a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=0"&gt;Originated items&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="grid-container"&gt;
                  &lt;div&gt;&lt;a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=1"&gt;Equipment Catelogue&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="grid-container"&gt;
                  &lt;div&gt;&lt;a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=4"&gt;Items removed from service&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="grid-container"&gt;
                  &lt;div&gt;&lt;a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=3"&gt;Items Under Evaluation&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="grid-container"&gt;
                  &lt;div&gt;&lt;a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=5"&gt;Evalutaion Completed but not proceed&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would need to center the text in each DIV element in the grid-container. However, they are all top aligned as below.</p>
  
  <p><a href="https://i.stack.imgur.com/NeJgU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NeJgU.png" alt="enter image description here"></a></p>