Bootstrap 是一个用于设计网页的 CSS 框架。由于其简单和易于实现，它是最广泛使用的 CSS 框架。 Bootstrap 与 HTML 和 JavaScript 一起使用以使网页具有交互性。横幅是网页中需要格外注意的部分。一个网页中可以有多个横幅，并且可以放置在网页的任何位置。 Bootstrap 中的横幅由 jumbotron 类表示。 Jumbotrons 具有预定义的样式，可以用作横幅。创建横幅的另一种方法是自定义样式的容器。 Bootstrap 的容器类也可用于创建任何高度和宽度的横幅。本文介绍了双色调横幅的创建，这意味着横幅由两种不同的颜色组成。以下示例展示了如何创建带有两种色调的横幅。
示例 1：在本示例中，我们使用自定义样式的容器类创建了横幅。容器类进一步分为行和列。该行由大小分别为 2 个单位和 10 个单位的两列组成。大小为 2 个单位的列被赋予一种颜色，另一列被赋予不同的背景颜色。第一列中会添加一个图标，第二列中会显示一条警告消息。在这个例子中，我们使用内联 CSS。这是垂直双色调横幅的示例。
代码实现：
HTML
Banner
Action Required
Your password is about to expire in
7 days. Please set a new password.
HTML
Hello World!
Welcome to GeeksForGeeks.
Explore our range of courses.
Avail the exclusive offers!
输出：
示例 2：在第二个示例中，我们使用了 jumbotron 类。横幅的高度和宽度与大屏幕的高度和宽度相同。 Jumbotron 被分成两个容器。容器高度不同但宽度相同。与下容器相比，上容器具有不同的颜色。对于此示例，我们在 HTML 文档的 head 部分的
Hello World!
Welcome to GeeksForGeeks.
Explore our range of courses. Avail the exclusive offers!