Writing Custom CSS vs. Using Front-end Frameworks

I came across a really confusing question while working with one of my peers. We are developing a Bootstrap 4 based web application.

I am a supporter of using opensource technologies to their max potential. So for our current project, I used Bootstrap's utility classes and refrained myself from writing any CSS until or unless it's absolutely important. For instance, to style a header I did this

<h1 class="header d-block mt-4 mb-4 caps">911 Address (Mandatory)</h1>

but my colleague is doing this way,

<h1 class="header">911 Address (Mandatory)</h1>

.header {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: block;
  text-transform: uppercase;
}

My point here is, if we are using Bootstrap 4, we should not write a single line of CSS just to achieve the same result.

But my colleague's point is, we have to repeat so many classes at so many levels and it's so much noise.

I am looking for few suggestions on which approach is better and why.

PS: Bootstrap is still the part of our project completely. So we are adding a footprint of Bootstrap and also writing custom CSS just to avoid a little noise in HTML