bootstrap jumbotron - Html (1)

📌 相关文章

📜 bootstrap jumbotron - Html (1)

📅 最后修改于: 2023-12-03 14:59:33.100000 🧑 作者: Mango

Bootstrap Jumbotron - Html

Introduction

Bootstrap Jumbotron is a responsive container that is used to showcase key content on a web page. It is used as a marketing feature to grab the attention of the audience as it comes with a big heading, subheading, and a call-to-action button. The jumbotron can be used to display important messages, quotes, inspirational texts or even host a video.

In this article, we will learn how to create a jumbotron using HTML and Bootstrap.

Requirements

We will be using the following tools in this tutorial:

HTML
Bootstrap

Steps

Here are the steps to create a jumbotron using HTML and Bootstrap:

Start by creating a new HTML file and adding the necessary Bootstrap files. Add the following code to the head section of your HTML file:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Jumbotron</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <!-- Popper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <!-- Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>
   <body>
   </body>
</html>

Next, add the jumbotron container to the body of your HTML file. The jumbotron container is a div with the class "jumbotron". You can also add a background image to your jumbotron by setting the background-image property.

<body>
   <div class="jumbotron" style="background-image: url('https://source.unsplash.com/collection/190727/');">
   </div>
</body>

Inside the jumbotron container, add a container with the class "container". This will center the content inside the jumbotron.

<div class="jumbotron" style="background-image: url('https://source.unsplash.com/collection/190727/');">
   <div class="container">
   </div>
</div>

Now, you can add a heading, subheading, and a call-to-action button to your jumbotron. Add the following code inside the container div:

<div class="jumbotron" style="background-image: url('https://source.unsplash.com/collection/190727/');">
   <div class="container">
      <h1>Bootstrap Jumbotron</h1>
      <p>Create a beautiful jumbotron with Bootstrap</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
   </div>
</div>

Save your HTML file and open it in a web browser. You should see your jumbotron with the heading, subheading, and call-to-action button.

Conclusion

In this tutorial, we learned how to create a jumbotron using HTML and Bootstrap. With the help of the jumbotron, you can easily showcase key content on your web page and grab the attention of your audience. The jumbotron is a great tool for marketing and can be used to display messages, quotes, or even videos.