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 ResponsiveW3CSS Nested Rows >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .