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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

    <script src="https://kit.fontawesome.com/136b4fde49.js" 
        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>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        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:

How to create a progress bar in different colors in Bootstrap ?

Shreyasi_Chakraborty

Improve

Article Tags :

How to create a two tone banner in bootstrap ?

Similar Reads

Thank You!

What kind of Experience do you want to share?