title: Bootstrap best practices?
body: <p>I do both web design and development. I usually prefer to write my own CSS and not use any frameworks. On my current project the client said after I finished the design that it would help their dev team if I could also code the HTML &amp; CSS. Their requirement was to use Bootstrap 4.</p>
  
  <p>I said OK and got to work. However I have some questions about best practices when working with Bootstrap.
  For example, say I want to have a <strong>.navbar-text</strong> that needs a left border with a certain non-theme color. My questions are:</p>
  
  <ul>
  <li>Should I create a new class for this, or just overwrite the <strong>.navbar-text</strong> class? Usually I follow BEM and would create a new class for this, but I'm not sure if that wouldn't be confusing in this instance.</li>
  <li>Since I'm already adding a CSS rule for the border, should I continue to add Bootstrap utility classes on the element, or should I just add CSS to my new rule? Say I want to add some left padding, should I add the <strong>pl-2</strong> class to the element, or should I add <strong>padding-left: 0.5rem</strong> to my CSS rule?</li>
  </ul>
  
  <p>I want to make my code as easy as possible for their dev team to work with and I'm not sure how to proceed. Any advice would be appreciated.</p>