How to have different styles (bold/unbold/italic) of the same heading (h-type) text in the same line in Bootstrap 4?

Question

I would like to find out how I can make it possible so that in a single line of text, say text, I can have some words bolded, and the rest of the text in that line not bolded. I have included a picture of my specific issue: Picture of my Issue

Specifically, as you can see, I would like to know how I can bolden "Honors:" and "Capstone:", but not the text follows in those lines.

I have included my current code below:

<section id= "about">
<div class= "container">
<div class= "row justify-content-center">
   <div class= "col-sm-10">
       <img src="assets/testLogo.png" width="200" height="200"  alt="" class="img-fluid logoImages ">
           <h1 class="text-center pt-4">XYZ College</h1>
           <h5 class="text-center pt-3">B.A In Cool Stuff XYZ Test 123</h5>
           <h6 class="text-center pb-3">September 20xx - May 20xx</h6>

           <h6 class="text-center pt-3">Honors: XYZABC Honorary Scholarship</h6>
           <h6 class="text-center pt-3">Capstone Title: The Study of supernatant fluids in extremely inert atmospheres and high temperatures</h6>
   </div>
</div>  
</div>  
</section>

Another question that is related would be, How can I make it so that the text is left aligned, meaning that "Honors...." and "Capstone..." through separate lines, start along the same vertical axis, and instead wrap down to preserve equal white space on each side?

Thanks a lot!

Answer 1

There is utility class for font weight in Bootstrap 4. Check this url: https://getbootstrap.com/docs/4.0/utilities/text/#font-weight-and-italics

For your code use a span to make the font weight normal.

<h6 class="text-center pt-3">Honors: <span class="font-weight-normal">XYZABC Honorary Scholarship<span></h6>

Or you can use custom style.