title: Aligning text inside a Bootstrap button
body: <ul>
  <li><p>I noticed there are similar questions however I tried the given solutions and nothing worked *</p></li>
  <li><p>My custom CSS file is 100% linked correctly to the html file I'm working on *</p></li>
  <li><p>I'm using Bootstrap v4.3.1 *</p></li>
  </ul>
  
  <p>So as the title suggests, I'm trying to align text inside a Bootstrap button - I need to do that using my own custom CSS file.</p>
  
  <p>I've created my new style.css file and linked it in the header (AFTER the Bootstrap CSS link), then I added a custom class (btn1) to my Bootstrap button:</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal"&gt;
  Launch demo modal
  &lt;/button&gt;
  </code></pre>
  
  <p>I then added the following code in my CSS:</p>
  
  <pre><code>.btn1{
    text-align: left !important;
  }
  </code></pre>
  
  <p>But the text on the button is still not aligned to the left. Any insights as for why it happens, and ways to solve the problem?</p>
  
  <p>Thanks!</p>