W3CSS Layout Classes

In the previous article we saw some of the most commonly used responsive classes. In this article we shall some important W3CSS layout classes. Following are some of these classes:

  • w3-cell-row: Used as container for w3-cell classes
  • w3-cell: A column or cell that contains data
  • w3-cell-top: Used to align content at the top of a cell
  • w3-cell-middle: Used to align content at the middle of a cell
  • w3-cell-bottom:Used to align content at the bottom of a cell
  • w3-mobile: Converts a cell to block level element on mobile screen.

Block to Cell Elements

Normally elements with container class are block level elements. They take whole width of the parent window. However, using w3-cell class, these block level elements are converted to inline block elements. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-container w3-yellow">
  <p>W3CSS Block Level Element</p>
</div>
    
<div class="w3-container w3-red w3-cell">
  <p>W3CSS Cell Level Element</p>
</div>

<div class="w3-container w3-green w3-cell">
  <p>W3CSS Cell Level Element</p>
</div>

</body>
    
</html>

Download the code Try the code

Open the above web page in a browser you should see first container element taking whole width of the window followed by two inline block elements. The bottom two elements also have a container class but they also have w3-cell element.

W3-Cell-Row

W3-cell-row class acts as a container class for the w3-cell elements. This class takes whole width of the parent element. The corresponding child elements adjust themselves according to parent width. Take a look at the following example.


Download the code Try the code

Cells with different Heights

Row cells with different heights adjust their heights so that they have uniform heights. For instance in the following example, the first cell contains only one line whereas the second cell contains multiple lines. The first cell expands vertically to meet the height of the second cell. Take a look at the third example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

<div class="w3-container w3-yellow w3-cell">
  <p>Single Line</p>
</div>

<div class="w3-container w3-blue w3-cell">
  <p>This is multiple line</p>
  <p>This is multiple line</p>
  <p>This is multiple line</p>
  <p>This is multiple line</p>
  <p>This is multiple line</p>
    

</div>
    


</body>
    
</html>

Download the code Try the code

W3-Mobile

As explained earlier, w3-mobile class is for the mobile responsiveness of the cells. Cells with w3-mobile class take complete width of the parent element on mobile devices. On large devices they shrink to occupy their actual width. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

<div class="w3-cell-row">
    
<div class="w3-container w3-green w3-cell w3-mobile">
  <p>Mobile Cell</p>
</div>
<div class="w3-container w3-yellow w3-cell w3-mobile">
  <p>Mobile Cell</p>
</div>
<div class="w3-container w3-pink w3-cell w3-mobile">
  <p>Mobile Cell</p>
</div>
    
    

</div>
    

</body>
    
</html>

Download the code Try the code

W3CSS Nested Rows

In the previous article we studied some of the most commonly used responsive classes such as w3-half, w3-third,
w3-quarter, w3-twothird, w3-threequarter etc. We saw how to use them individually. However the best thing about W3CSS is that you can create nested rows or rows within rows and use responsive classes to create a fully responsive layout. In this article we shall study W3CSS nested rows, the rest and the percentage widths.

W3CSS Nested Rows

Nested rows are best explained with the help of an example. Take a look at it:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row w3-container w3-black">
  <div class="w3-half w3-container">
      <div class="w3-row">
    
          <div class="w3-third w3-container w3-blue">
            abcd
          </div>
          
             <div class="w3-third w3-container w3-yellow">
            abcd
          </div>
          
             <div class="w3-third w3-container w3-red">
            abcd
          </div>
  
      </div>
    
  </div>
    
      <div class="w3-half w3-container">
      <div class="w3-row">
    
          <div class="w3-half w3-container w3-green">
            abcd
          </div>
          
             <div class="w3-half w3-container w3-purple">
            abcd
          </div>
          
  
      </div>
    
  </div>

</div>

</body>
    
</html>

Download the code Try the code

Take a careful look at the above example. Here we have ab outer div with class “w3-row”. Inside this row we have our first container with class “w3-half”. Inside the first container we again have a div with class “w3-row”. This is nested row inside the first half container. Inside this nested row, we create three more containers of width 1/3 of the parent using class w3-third. Now our first half container further contains three inner containers of colors blue, yellow and red respectively.

Inside the outer row, after the first half container we create another container using “w3-half” class. Inside the container we have another row with class “w3-row”. Inside the inner row we create two container with width half of their parent using “w3-half” class. So overall we have two outer container of width half of the window. Inside the first container we add three child containers of width 1/3rd. Similarly inside the second container we add two child containers of width half.

Setting width using rest

You can use w3-rest class to occupy the remainig width of any container. Take a look at this example.

Download the code Try the code

Setting width using percentage

You can also set the width of a container by setting width style property to a percentage value. The following exampled demonstrates this concept:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
    <div class="w3-col w3-red" style="width:20%"><p>20%</p></div>
    <div class="w3-col w3-green" style="width:30%"><p>30%</p></div>
    <div class="w3-col w3-yellow" style="width:50%"><p>50%</p></div>
</div>


</body>
    
</html>

Download the code Try the code

W3CSS Responsive Classes

In the previous article, we saw what W3CSS responsive classes. In this article we shall put them to practical use and see how they work.

W3-half

This class takes half of the total width of the parent element. On devices smaller than 601 pixels it expands and take full width of the parent element. Take a look at the following example to see w3-half in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
  <div class="w3-half w3-container w3-red">
    <h2>This is half using w3-half class</h2> 
  </div>
  <div class="w3-half w3-container w3-blue">
    <h2>This is the other half using w3-half class</h2> 
  </div>
</div>

</body>
    
</html>

Download the code Try the code

W3-third

This class takes 1/3rd of the total width of the parent element. On devices smaller than 601 pixels it expands and take full width of the parent element. Take a look at the following example to see w3-third in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
  <div class="w3-third w3-container w3-red">
    <h2>This is 1/3 using w3-third class</h2> 
  </div>
  <div class="w3-third w3-container w3-blue">
 <h2>This is 1/3 using w3-third class</h2> 
  </div>
    <div class="w3-third w3-container w3-yellow">
    <h2>This is 1/3 using w3-third class</h2> 
  </div>
</div>

</body>
    
</html>

Download the code Try the code

W3-quarter

This class takes 1/4th of the total width of the parent element. On devices smaller than 601 pixels it expands and take full width of the parent element. Take a look at the following example to see w3-quarter in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
  <div class="w3-quarter w3-container w3-red">
    <h2>This is 1/4 using w3-quarter class</h2> 
  </div>
    
      <div class="w3-quarter w3-container w3-blue">
    <h2>This is 1/4 using w3-quarter class</h2> 
  </div>
    
      <div class="w3-quarter w3-container w3-green">
    <h2>This is 1/4 using w3-quarter class</h2> 
  </div>
    
      <div class="w3-quarter w3-container w3-yellow">
    <h2>This is 1/4 using w3-quarter class</h2> 
  </div>

</div>

</body>
    
</html>

Download the code Try the code

W3-twothird

This class takes 2/3rd of the total width of the parent element. On devices smaller than 601 pixels it expands and take full width of the parent element. Take a look at the following example to see w3-twothird in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
  <div class="w3-twothird w3-container w3-red">
    <h2>This is w3-twothird</h2> 
  </div>
    
      <div class="w3-third w3-container w3-blue">
    <h2>This is w3-third</h2> 
  </div>
    
  </div>

</div>

</body>
    
</html>

Download the code Try the code

W3-threequarter

This class takes 3/4th of the total width of the parent element. On devices smaller than 601 pixels it expands and take full width of the parent element. Take a look at the following example to see w3-threequarter in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
  <div class="w3-threequarter w3-container w3-red">
    <h2>This is w3-threequarter</h2> 
  </div>
    
      <div class="w3-quarter w3-container w3-blue">
    <h2>This is w3-quarter</h2> 
  </div>
    
  </div>

</div>

</body>
    
</html>

Download the code Try the code

Open the above page in browser, you shall see two container type elements placed side by side. The first red container shall take three fourth of the total width of the parent element while the blue container will take one fourth of the total width of the container.

W3CSS Responsive

Now a days, people use internet on devices of varying sizes and resolutions. With the advent of tablets and phones of different sizes, web developers have to pay particular attention to how website looks on all of these devices. This is where concept of responsiveness comes to play. A responsive website is the one which adjusts itself to changing size of the screen. For instance a website may display its full menu on large screen, where on small screen it displays a menu button which when clicked displays menu. W3CSS Responsive classes help create responsive website. In this article and some of the next articles we shall study W3CSS Reponsive classes

W3CSS Responsive Classes

Following is the list of W3CSS responsive classes:

  • w3-half: Used to cover half width of the window
  • w3-third: Used to cover 1/3 of the window
  • w3-twothird: Covers 2/3 of the window
  • w3-quarter: Covers 1/4 of the window
  • w3-threequarter: Covers 3/4 of the widrth window
  • w3-rest: Covers rest of the width of the window
  • w3-col: Defines the number of columns occupied in the 12 column system.
  • w3-mobile: Converts the element to block level on mobile devices.

All of the above classes must be placed in some container class in order to create responsive layouts. The container classes are as follows:

  • w3-row: Container for responsive classes with no padding
  • w3-row-padding: Container for responsive classes with 8 pixel padding on left and right
  • w3-content: This class is used to contain fixed centered content.
  • w3-hide-small: Used to hide the element on small screen
  • w3-hide-medium: Used to hide the element on medium screen
  • w3-hide-large: Used to hide the element on large screens
  • l1-l12: Responsive column size for large screens
  • m1-m12: Responsive column sizes for medium screens
  • s1-s12: Responsive column sizes for small screens

Now we know what are the classes that are used to create responsive layouts in W3CSS. From the next article onwards, we shall see these classes put to practical use. We shall create some amazing responsive layouts in the next article. Stay tuned!

W3CSS Icons

W3CSS supports variety of icon libraries including font awesome icons, bootstrap icons and google material design icon. To use icons from these external libraries we first have import the CDN link from the server of the corresponding library and add it as style sheet to the header section of our website. We can then increase the size of these icons using w3-size property. We can also change their color via w3-text-color property.

Using Font Awesome

To use font awesome icons in your website, you need to include CDN link of the library in the styles sheet in the header section. In the following example we used four font awesome icons. We changed their colors with w3-text-green. In the output you should see pencil, search, shower and trash icons. Take a look at the following example:


Download the code Try the code

If you open the above page in browser, you should see four icons with green color.

Using Google Material Icons

To use google material design icons in your website, you need to include CDN link of the google material design library in the styles sheet in the header section. In the following example we used four google material design icons. We changed their colors with w3-text-pink. In the output you should see menu, search, mail and close icons. Take a look at the following example:


Download the code Try the code

Using Twitter Bootstrap Icons

To use bootstrap icons in your website, you need to include CDN link of the bootstrap icon library in the styles sheet in the header section. In the following example we used four bootstrap icons. We changed their colors with w3-text-red. In the output you should see print, search, plane and user icons. Take a look at the following example:


Download the code Try the code

W3CSS Tag Types

In the last article we studied how to create tags via w3-tag class. In this article we shall see some advanced usage of tags. We shall see different W3CSS tag types including rounded tags, tags as road signs, tilted tags and spinning tags. So let the fun begin.

Tags as Road Signs

You can make normal tags look like road signs. To do so, create a div and give it some background color and padding and round its borders. Inside the div create a tag and give it same background color as the outer div. Also give it a border. Inside the tag, write whatever you want. The output will be a road sign like tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  
  <div class="w3-tag w3-round w3-blue" style="padding:4px">
  <div class="w3-tag w3-round w3-blue w3-border w3-border-yellow">
    Michal Jackson Avenue
  </div>
</div>
 


</body>
    
</html>

Download the code Try the code

Rounded Tags

You can also create rounded tags. To do so, add w3-round-size class to the tag. Size can be small, large,xlarge xxlarge anything. Take a look at the following example to see rounded tags in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<span class="w3-tag w3-padding w3-round-large w3-orange w3-center">
WARNING<br>
KANGROO<br>
CROSSING
</span>
 


</body>
    
</html>

Download the code Try the code

Rotating Tags

One of the most awesome aspects of tags is that they can be rotated. Yes, you can create tilted tags. To so, add inline style property transform and set it to the degree of rotation you want. In the following example a tag is rotated -10 degree. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<span class="w3-tag w3-xxlarge w3-padding w3-pink" style="transform:rotate(-10deg)">
Sale on Ladies Items!
</span>
 


</body>
    
</html>

Download the code Try the code

Spinning Tags

Apart from rotating a tag to certain degree you can also create tags that spin about its axis. Unlike rotating tags, you do not require any external style to spin a tag. Rather, you simple have to add w3-spin class to a tag and it will make tag rotate clockwise about its axis. Take a look at the following code sample:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<span class="w3-tag w3-spin w3-xlarge w3-purple">
Fun Fair 2017
</span>
 


</body>
    
</html>

Download the code Try the code

W3CSS Tags

In the previous article we started our discussion on badges. Tags are used to display signs or symbols on webpage. For instance, the are used to alert user that it is not safe to click a link etc. Like badges, tags are also created using span tags. Simply add w3-tag class to the opening span tag and you are done. Unlike badges, tags carry their own meaning and it is not necessary to wrap them inside a list, or button or paragraph etc. Though you can if you want. In this article and the next one, we shall study W3CSS tags.

Basic W3CSS Tags

To create a basic W3CSS tag, add w3-tag class to the opening span tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  

  <span class="w3-tag">Messages</span>


</body>
    
</html>

Download the code Try the code

Colored Tags

By default, tags are black like default badges. However you can add color to the tags via w3-color class. Use this class in conjunction with w3-tag class to create colored tags. In the following example we shall create red and green tags. Take a look at it:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  
  <span class="w3-tag w3-red">Stop</span>
  <span class="w3-tag w3-green">Start</span>


</body>
    
</html>

Download the code Try the code

Tag Sizes

Tags can be of multiple sizes as defined by the classes. The classes that define size of the tag are w3-tiny,
w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge and w3-jumbo. All of these classes have been demonstrated in the following example. Take a look at it:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  
  <span class="w3-tag w3-red w3-tiny">Stop</span>
    <span class="w3-tag w3-red w3-small">Stop</span>
    <span class="w3-tag w3-red w3-large">Stop</span>
    <span class="w3-tag w3-red w3-xlarge">Stop</span>
    <span class="w3-tag w3-red w3-xxlarge">Stop</span>
    <span class="w3-tag w3-red w3-xxxlarge">Stop</span>
    <span class="w3-tag w3-red w3-jumbo">Stop</span>

  


</body>
    
</html>

Download the code Try the code

Tags as Signs Or Symbols

Normal tags with larger size and text on them can be used as signs or symbols. In the following example we have used two symbols “Stop, Construction Ahead” and “Animal” Crossing symbol using large and x-large size. Also, using appropriate color for your tag can help convey meaning of the symbol. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  
  <span class="w3-tag w3-red w3-large">Stop! Contruction Ahead</span>
    <span class="w3-tag w3-orange w3-xlarge">Animal Crossing</span>
 


</body>
    
</html>

Download the code Try the code

W3CSS Badges

Badges are tiny circle that are used to display important information in succinct manner. If you look at Facebook, you see notifications, messages or friend requests in small red circles. These are basically badges. Badges are black in color by default however you can change badge color quite easily. In this article we shall study W3CSS badges. Let’s create a very simple badge

Basic W3CSS Badges

To create a simple badge, we use span tag and give it a class of “w3-badge”. Anything within the span tags will be displayed in the form of a badge. Normally, a paragraph tag is used in conjunction with span tag to display a message. Take a look at the following sample code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  

  <p>Messages <span class="w3-badge">9</span></p>


</body>
    
</html>

Download the code Try the code

Colored Badges

As mentioned earlier, by default badges are of black color. However, you can create colored badges by using w3-color class in conjunction with w3-badge class inside opening span tag. In the following example we shall create teal and yellow badges. Take a look at the following code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  
  <p>Messages <span class="w3-badge w3-teal">4</span></p>
  <p>Friend Requests <span class="w3-badge w3-yellow">7</span></p>


</body>
    
</html>

Download the code Try the code

Badges in Buttons and Lists

Apart from paragraphs, you can also add badges inside buttons and lists. The technique is to add span tag inside the button tag and then convert that span into badge using “w3-badge” class. Similarly, add span to the opening “li” element of the list and then add “w3-badge” class to the span. This will add a badge to that list element. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<p><button class="w3-btn w3-blue">Button
<span class="w3-badge w3-margin-left w3-red">10</span>
</button></p>

<p><button class="w3-btn w3-yellow">Button
<span class="w3-badge w3-margin-left">20</span>
</button></p>
    
    <ul class="w3-ul">
  <li><span class="w3-badge">10</span> Ronaldo</li>
  <li><span class="w3-badge">20</span> Messi</li>
  <li><span class="w3-badge">31</span> Neymar</li>
</ul>


</body>
    
</html>

Download the code Try the code

Right Justified List Badges

In the previous example, badges were on the left side of the list item. You can also add right justified badges.
To do so, simple add w3-right class to the span along with w3-badge class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <ul class="w3-ul">
  <li>Ronaldo <span class="w3-badge w3-right">10</span></li>
  <li>Messi <span class="w3-badge w3-right ">20</span></li>
  <li>Neymar <span class="w3-badge w3-right ">30</span></li>
</ul>


</body>
    
</html>

Download the code Try the code

W3CSS Input Types

In the previous article, we started our discussion on W3CSS inputs. We saw how to style inputs via W3CSS classes. From simple forms to cards and hoverable inputs, we saw versatility of W3CSS classes. However, in the last article we stuck to text type inputs. In this article we shall see rest of the W3CSS input types. We shall start our discussion with check boxes, followed by radio buttons and select statement.

Check Boxes

Check boxes is one of the most commonly used input types especially when you want to allow user to select multiple options from set of options. To convert an input type into checkbox simply add “we-check” class to it. Take a look at the following example to see how check boxes are implemented with W3CSS.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <form class="w3-container w3-card-4">
      <h2>Select Courses</h2>
      <p>
      <input class="w3-check" type="checkbox" checked="checked">
      <label>English</label></p>
      <p>
      <input class="w3-check" type="checkbox">
      <label>History</label></p>
      <p>
      <input class="w3-check" type="checkbox" disabled>
      <label>Mathematics (Disabled)</label></p>
      <p>
      <input class="w3-check" type="checkbox" disabled>
      <label>Science</label></p>
    </form>

</body>
    
</html>

Download the code Try the code

Open the above page in browser. You should see a list of subjects with the first subject already selected. You can check as many check boxes as you like

Radio Buttons

Radio buttons are commonly used where you want user to select only one of the option from the set of options.Add the class “w3-radio” to the input of type “radio” to create W3CSS radio buttons. Take a look at following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <form class="w3-container w3-card-4">
  <h2>Select Class</h2>
  <p>
  <input class="w3-radio" type="radio" name="class" value="economy" checked>
  <label>Economy</label></p>
  <p>
  <input class="w3-radio" type="radio" name="class" value="business">
  <label>Business</label></p>
  <p>
  <input class="w3-radio" type="radio" name="class" value="" disabled>
  <label>First Class(Disabled)</label></p>
</form>

</body>
    
</html>

Download the code Try the code

Select Options

Another very useful input type is the select type. The select type displays data in the form of drop down list from which one item can be selected. Take create W3CSS select input type, add w3-select class to the opening select tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  <h1>Select Travel Class</h1>

  <select class="w3-select" name="option">
    <option value="" disabled selected>Prime Class</option>
    <option value="1">Economy Class</option>
    <option value="2">Business Class</option>
    <option value="3">First Class</option>
  </select>

  <p><button class="w3-btn w3-blue">Book Place</button></p>

</body>
    
</html>

Download the code Try the code

Open the above page in browser. You shall see a drop down list with “Prime Class” selected by default and disabled. You can choose one of the economy, business and first class from the drop down list.

W3CSS Inputs

Inputs are used to get information from the user. For instance, input forms are available at job listing sites where user can register themselves to apply for different jobs. Similarly, to login to a website, user need to enter his username and/or password. In short, inputs are fundamental part of a website. Inputs fields are usually specified inside forms tags. In this article we shall see how to create W3CSS inputs and how they can be used to retrieve data from the user.

Simple W3CSS Inputs

There are three parts to creating a beautiful looking input form. First create a div with class w3-container and header color. Inside this div create a heading using h1 or h2 tag. Next create a form tag with class w3-container. Inside the form tag, wrap each label and its input field inside a paragraph. Add w3-input class to each input element. This creates a beautiful looking input form. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

    <form class="w3-container">
      <p>
      <label>Full Name</label>
      <input class="w3-input" type="text"></p>
      <p>
      <label>Age</label>
      <input class="w3-input" type="text"></p>
      <p>
      <label>City</label>
      <input class="w3-input" type="text"></p>
</form>
</body>
    
</html>

Download the code Try the code

Inputs as Cards

It is very simple to create Input form in the form of card. Simply wrap the input form created in the last example inside a div. Add w3-card-number class to the opening div tag of that div. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-card-4" style="Width:50%">
    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

        <form class="w3-container">
          <p>
          <label>Full Name</label>
          <input class="w3-input" type="text"></p>
          <p>
          <label>Age</label>
          <input class="w3-input" type="text"></p>
          <p>
          <label>City</label>
          <input class="w3-input" type="text"></p>
    </form>
    
</div>
</body>
    
</html>

Download the code Try the code

Input with Borders

You can also create input forms where each input field has a border around it. To do so add w3-border class to the input field. Similarly, to create rounded borders add w3-round class to the input field. The following example demonstrates this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

    <form class="w3-container">
      <p>
      <label>Full Name</label>
      <input class="w3-input w3-border" type="text"></p>
      <p>
      <label>Age</label>
      <input class="w3-input w3-border w3-round" type="text"></p>
      <p>
      <label>City</label>
      <input class="w3-input w3-border w3-round-large" type="text"></p>
</form>
</body>
    
</html>

Download the code Try the code

Hover-able Inputs

You can create input fields whose color change upon mouse hover. To do so, simply add w3-hover-color class to the input field. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    

    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

    <form class="w3-container">
      <p>
      <label>Full Name</label>
      <input class="w3-input w3-hover-yellow" type="text"></p>
      <p>
      <label>Age</label>
      <input class="w3-input w3-border w3-hover-blue" type="text"></p>
      <p>
      <label>City</label>
      <input class="w3-input w3-border w3-hover-pink" type="text"></p>
</form>
</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .