How to create a two tone banner in bootstrap ?
Last Updated :
20 Nov, 2020
Bootstrap is a CSS framework used to design webpages. It is the most widely used CSS framework all over due to its simplicity and ease of implementation. Bootstrap is used along with HTML and JavaScript to make the webpages interactive. Banners are section in the webpage that call for extra attention. There can be multiple banners in a webpage and can be positioned anywhere in the webpage. Banners in Bootstrap are represented by the jumbotron class. Jumbotrons have predefined styles and can be used as banners. The other way to create a banner is custom styled container. The container class of Bootstrap can also be used to create banners of any height and width. This article deals with the creation of a two-tone banner which means the banner consists of two different colors. The following examples show how to create a banner with two-tone.
Example 1: In this example, we have created the banner using custom styled container class. The container class is further divided into rows and columns. The row consists of two columns of size 2 units and 10 units respectively. The column of size 2 units given one color and the other column is given a different background color. An icon is added in the first column and a warning message is displayed in the second column. In this example, we use inline CSS. This is an example of vertical two toned banner.
Code Implementation:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Banner</title>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container-fluid" style=
"background:#FF3244;height: 170px;">
<div class="row">
<div class="col-2" style=
"background:#C60012;height:170px;">
<i class="fas fa-exclamation-triangle
fa-10x py-1" style="color: #1C2833;">
</i>
</div>
<div class="col-10">
<h1 class="display-4">Action Required</h1>
<p class="lead">
Your password is about to expire in
7 days. Please set a new password.
</p>
</div>
</div>
</div>
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Example 2: In the second example, we have made use of a jumbotron class. The height and width of the banner is equivalent to that of the jumbotron. The jumbotron is divided into two containers. The containers are of different heights but same width. The upper container has a different color compared to the lower container. For this example, we have defined the CSS styles within the <style> tag in the head section of the HTML document. This is an example of horizontal two toned banner.
Code Implementation
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style type="text/css">
#upper {
background-color: yellow;
height: 100px;
padding-bottom: 20px;
padding-left: 10px;
}
#lower {
background-color: pink;
height: 80px;
padding: 10px;
}
</style>
</head>
<body>
<div class="jumbotron-fluid">
<div class="container-fluid" id="upper">
<h2 class="display-4">Hello World!</h2>
<p class="lead" id="upper_lead">
Welcome to GeeksForGeeks.
</p>
</div>
<div class="container-fluid" id="lower">
<p class="lead">
Explore our range of courses.
Avail the exclusive offers!
</p>
</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...