How to create a two tone banner in bootstrap ?
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.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.