Bootstrap Jumbotron With Image Background

This tutorial will guide you through the process of creating a visually appealing Bootstrap Jumbotron with an image background, enhancing your website’s header section.

Adding Bootstrap CSS

This step involves including the Bootstrap CSS file in the section of your HTML document. This will provide the necessary styling and components for the jumbotron.

<link rel=’stylesheet’ href=’https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css’>

Creating the HTML Structure

Next, we’ll build the HTML structure for the jumbotron. This includes the main `div` element with the appropriate Bootstrap classes, a container for the content, a heading, a paragraph, and a button. A “page-scroll” div is also added for demonstration purposes.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-2">Fluid jumbotron.</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    <button class="btn btn-outline-danger">This is a Button</button>
  </div>
</div>
<div class="page-scroll">

Styling the Jumbotron with CSS

Now, we’ll use CSS to customize the appearance of the jumbotron. This includes setting the background image, applying a gradient overlay, adjusting the text color, and styling the button.

.jumbotron{
  margin:15px 30px 0px 30px;
  border-radius:10px;
    background: 
linear-gradient(
  rgba(0, 0, 250, 0.25), 
  rgba(125, 250, 250, 0.45)
),
url(https://source.unsplash.com/1600x1050/?nature);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:340px;
}

.page-scroll{
  height:5000px;
}

.btn-outline-danger{
  color:white;
  border-color:white;
  border-radius:0px;
  font-weight:100;
  margin-top:20px;
}
.lead{
  font-family:raleway;
  font-weight:100;
  margin-top:-10px;
}

Final Result

By following the steps outlined in this tutorial, you have successfully created a Bootstrap Jumbotron with Image Background. If you have any questions or suggestions, feel free to comment.