Using Bootstrap, how can I add two heading elements in one row?

October 19, 2022

For some reason, I was able to achieve what I wanted earlier in the day, but now when I am trying to re-create my code, it won’t replicate.

I want two header elements, h2 and h3, centered-aligned in one div row, within the jumbotron section.

Then, I want to add bottom-margin to the h3 element to lift it slightly above the h2 element, like in the photo.

I still have my original code in hand, but even after copynpasting the exact code with the same styling, the h3 element ends up being directly below h2.

I have tried cross-referencing with dev tools, and i found that the only difference is the div row containing the h2 and h3 elements is missing display:flex, but it’s still not working.

what i want to happen

what is happening

Original Working Code:

HTML:
<section class="jumbotron">
  <div class="container">
    <div class="row">
      <h2>Jumbotron</h2>
      <h3>Bootstrap</h3>
    </div>
  </div>
</section>

CSS:
.jumbotron {
  display: flex;
  align-items: center;
  background-image: url('https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80');
  background-size: cover;
  color: #ffffff;
  height: 400px;
}

.jumbotron h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: ;
}

.jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
}

Thank you for your help!

>Solution :

change row class with d-flex like

<section class="jumbotron">
  <div class="container">
    <div class="d-flex">
      <h2>Jumbotron</h2>
      <h3>Bootstrap</h3>
    </div>
  </div>
</section>