W3.CSS Bar

Note : w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element.

w3-bottombar : Using this class to add a thick bottom border to an element.
w3-leftbar  : Using this class to add a thick left border to an element.
w3-rightbar  : Using this class to add a thick right border to an element.
w3-topbar : Using this class to add a thick top border to an element.

Example 
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>

<div>
<h2>Without W3.CSS a Container</h2>
<p>W3. CSS Containers is predefine class use just like a external CSS.</p>
<p>The W3-Container class adds a 16px left and right padding to any HTML element.</p>
</div>

<div class="w3-container">
<h2>With W3.CSS a Container</h2>
<p>W3. CSS Containers is predefine class use just like a external CSS.</p>
<p>The W3-Container class adds a 16px left and right padding to any HTML element.</p>
</div>

</body>
</html>
Output
W3.CSS

Different Thick Border with Bars are present

I am paragraph my property is thick left border.

I am paragraph my property is thick blue left border and a pale-blue background color.

I am paragraph my property is thick yellow right border.

I am paragraph my property is thick red left border.

I am paragraph my property is thick blue right border.

I am paragraph my property is thick red left border.

I am paragraph my property is thick blue left border.

I am paragraph my property is thick right border.

I am paragraph my property is thick red top and bottom border and a pale-red background color.

I am paragraph my property is thick green left border.

I am paragraph my property is thick green left border.

I am paragraph my property is thick yellow all border.

Previour Topic
Next Topic
W3.Css Framework
CSS Framework Website development using W3.CSS Framework. W3.CSS is a Framework W3.CSS is a modern CSS framework with built-in responsiveness ...
Read More
W3.Css Containers
W3.Css Containers W3. CSS Containers is predefine class use just like a external CSS. The W3-Container class adds a 16px left ...
Read More
W3.CSS Background colors
W3.CSS Background colors The w3-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Text colors
W3.CSS Text colors The W3-text-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Hover Colors
W3.CSS Hover Colors The W3-hover-color classes define the background hover color for any HTML element. The W3-hover-text-color classes define the text hover ...
Read More
W3.CSS Panels
W3.CSS Panels Panels are the same as containers but extra feature is to added top and bottom margin. The w3-panel ...
Read More
W3.CSS Borders
W3.CSS Borders w3-border : Using this class to add borders (top, right, bottom, left) to an element.w3-border-top : Using this ...
Read More
W3.CSS Bar class
W3.CSS Bar Note : w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element. w3-bottombar ...
Read More
W3.CSS Text Alignment
W3.CSS Text Alignment The w3-left-align classes are used for left alignment elements. The w3-right-align classes are used for right alignment ...
Read More
W3.CSS Text Property
W3.CSS Wide Text The w3-wide classes are used for wider text. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link rel="stylesheet" href="w3.css"> <body> ...
Read More

Don’t miss Join Our Community!

Email Id
English Hindi