Input and button inside navbar:
Padded navbar:
An horizontal bar is a common web design element:
Hello W3.CSS Cell.
Hello W3.CSS Cell.
In this example, we use W3.CSS' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.
| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Resize the screen to see the effect.
The w3-stretch class removes the right and left margins from an element. This class is often used to stretch a padded row:
An example with w3-stretch:
An example without w3-stretch:
The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).
Touching, gripping and genuinely well made.
A huge success for Marvel and Disney.
The w3-codespan class is used to hightlight inline code:
The following HTML elements: span, section, and div defines a section in a document.
The w3-code class create code containers to highlight HTML, JavaScript and CSS code.
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}var x = 5; // assign the value 5 to x
var y = 2; // assign the value 2 to y
var z = x + y; // assign the valueThe w3-code class create code containers to highlight HTML, JavaScript and CSS code.
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}var x = 5; // assign the value 5 to x
var y = 2; // assign the value 2 to y
var z = x + y; // assign the valueThe w3-block class can create a full-width button.
Display content inside a div element with a specific height:
Display text inside an image:
Top Left
Top Right
Bottom Left
Bottom Right
Top Mid
Bottom Mid
(We have added w3-container classes and p elements to get correct padding)
The w3-tag class creates a tag/label:
News New!
Comments More Later!
The w3-badge class creates circular badges:
News 6
Comments 10
The w3-border class adds a border around the table.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Panels are the same as containers except for an added top and bottom margin.
I am a panel
I am a panel
I am a container
I am a container