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

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .