Select Option Choose Your Option

Select Your Free Option

Choose your option Option 1 Option 2 Option 3

Bordered Select Menu

Select Your Free Option

Choose your option Option 1 Option 2 Option 3

Form Elements in a Grid

Form Elements in a Grid

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.

http://www.w3schools.com/w3css/w3css_input.asp Icon Labels

Contact Us

UTF-8 Badges

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

W3.CSS Badges

You can display single digit badges using UTF-8 Dingbats:

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

Badge Sizes By default, a badge will inherit the size of its container. The w3-size classes (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) can be used to modify the size of a badge: Badges in Tables Eve Jackson 1 94 Adam Johnson 2 67 Try It Yourself »

List with Badges

The w3-right class floats an element to the right

This is perfect for lists with badges:

• Jill 5
• Eve 3
• Adam 8

========================= Animated Accordions
Use any of the w3-animate-classes to fade, zoom or slide in the accordion content

Animated Accordions

Use any of the w3-animate-classes to fade, zoom or slide in the accordion content (w3-animate-zoom|opacity|top|bottom|left|right):

Link 1 Link 2 Link 3

Accordions

An accordion with lists:

• Jill
• Eve
• Adam

• Jill
• Eve
• Adam

Mobile First Responsiveness

Try to resize the window!

w3-threequarter

The w3-threequarter class uses 75% of the parent container.

On screens smaller than 601 pixels it resizes to full screen.

w3-quarter