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

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .