How to make text center in Hero image with bootstra

Question

Can you explain How to make text center in Hero image with bootstra

Answer 1

You can use a combination of Bootstrap's grid system and custom CSS. Below is an example of how you can achieve this:

HTML:

<div class="hero-image" style="background-image: url('your-image.jpg');">

  <div class="container">

    <div class="row">

      <div class="col-xs-12 text-center">

        <h1 class="hero-text">Centered Text</h1>

        <p class="hero-subtext">Any subtitle</p>

      </div>

    </div>

  </div>

</div>

CSS:

.hero-image {

  position: relative;

  height: 400px;

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white; 

}


.hero-text {

  font-size: 3em; 

  font-weight: bold;

}


.hero-subtext {

  font-size: 1.5em; 

  margin-top: 10px;

}