Bootstrap full-width hero section with text and image

bgimage.css

.bgimage {
  width:100%;
  height:500px;
  background: url('https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
}
.bgimage h5 {
  color:white;
  text-shadow:2px 2px #333;
}

bgimage.html

<section class="bgimage">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h5>Hello, world! Full width Hero-unit header</h5>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
      </div>
    </div>
  </div>
</section>

A CodePen would wrap this up nicely, I believe. Nice work

Bootstrap 4 version using jumbotron https://codepen.io/eversionsystems/pen/YOmqdj

Thanks, Nice work

Simple and effective, thanks!

This helps,
Thanks,

thanks

super helpful, thanks

Thank you

tyty

Thank you

This helped me learn how to make a hero image on my webpage. Thank you!

Thank you for this!

Thanks!

This looks amazing! Thanks!

Thank you it's great!

You rule! Thank you!

Here are examples for the Bootstrap 5 version:
https://mdbootstrap.com/docs/standard/navigation/headers/

This is a great simple example. A huge help!

great saved me so much time thankyou

Thank you! This was really helpful