Aligning text inside a Bootstrap button

• I noticed there are similar questions however I tried the given solutions and nothing worked *

• My custom CSS file is 100% linked correctly to the html file I'm working on *

• I'm using Bootstrap v4.3.1 *

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.

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:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

I then added the following code in my CSS:

.btn1{
  text-align: left !important;
}

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?

Thanks!

You will need to change the padding on your custom css to 0, as this is still picking up the bootstrap padding. Then you can set the width to whatever size you like and add custom padding if you wanted.

Example:

.btn1{
  text-align: left !important;
  padding: 0;
  width: 50px;
}