Bootstrap 4: text-center & aligned left?

Question

Goal: I'd like the text to be aligned to the left but center of the screen using Bootstrap 4.

Example:

                       This text is centered
                       And aligned left

I've tried wrapping the text in a parent like below however it is not currently working.

 #text{ font-size: 50px; } 

  <div style="text-align: center;"> <div style="display: inline-block; text-align: left;"> <p id='text'> This text is aligned left but not centered </p> </div> </div> 

Answer 1

Just set a width size that you're looking for ( or use bootstrap sizes ).

p{
   width: 300px;
   font-size: 50px;
   text-align: left;
   margin: 0 auto;
}

https://jsfiddle.net/9eaxhy01/

Answer 2

Because you use 2x div and style. First div is always property takes precedence.