row

Lets write a simple C program to print/display a 3×5 matrix using nested for loop.

Note:
3×5 matrix means, a Matrix with 3 rows and 5 columns.

Related Read:
Nested For Loop In C Programming Language

Logic To Print Matrix using Nested For Loop

Outer for loop selects the rows. Inner for loop prints elements of that row. Next outer for loop selects the next row, and the inner for loop prints elements for that selected row. This continues until all the elements of the Matrix are printed.

Video Tutorial: C Program To Print Matrix using Nested For Loop

YouTube Link: https://www.youtube.com/watch?v=lYikrWLI96g [Watch the Video In Full Screen.]

Source Code: C Program To Print Matrix using Nested For Loop

#include

int main()
{
    int row, col;

    for(row = 1; row <= 3; row++)
    {
        for(col = 1; col <= 5; col++)
        {
            printf("\t%d", col);
        }

        printf("\n");
    }

    return 0;
}

Output:

        1       2       3       4       5
        1       2       3       4       5
        1       2       3       4       5

For list of all c programming interviews / viva question and answers visit: C Programming Interview / Viva Q&A List

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

Today lets play with Ionic grid system – it’s built with CSS Flexible Box Layout Module standard, hence it supports all the devices which ionic supports.

Topics Covered
1. Basics of row, column
2. even spacing of column
3. explicit column sizing
4. column offset
5. column positioning
6. row positioning – Going vertical
7. responsive grid

Getting started
To get started from scratch, please visit Getting Started With IONIC APP. Get your IONIC app template ready and continue with this video tutorial.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android: Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

I’ve installed ionic tabs template and am editing tab-dash.html file inside www/templates folder.

YouTube Link: https://www.youtube.com/watch?v=IYw0n9hEqMg [Watch the Video In Full Screen.]

Basics of row and column

    
       .col
       .col

.col

rows are specified with class row and columns with class name col

Even spacing of columns

    
       .col
       .col  
       .col  
       .col  
       .col

.col

In above example all columns take up 20% of space depending on the screen width of the device. i.e., 100/5 = 20. There are 5 columns.

Explicit column spacing

    
       .col-50
       .col  
       .col

.col-50

.col

Here the first column takes 50% of the width and the other 2 columns share the width equally i.e., 25% each.

Column offset

    
       .col-25
       .col-25  
       .col-25

.col-25

Above code leaves 25% offset at the beginning, then a column of width 25% followed by 2 more columns of 25% width.

Column positioning

    
       .col-top
       .col-center  
       .col-bottom  
       
        1 
2 
3 
4

.col-top

.col-center

.col-bottom

1
2
3
4

The first column aligns itself to the top, the second one to the center and the last one to the bottom.

Row positioning – Going vertical

.col

1
2
3
4

row-center class makes the row align itself to the center, row-top makes it align itself to the top and row-bottom makes row to align itself to the bottom.

responsive grid

    
       .col
       .col  
       .col

.col

You can see its effect only on real devices. You must test it with real devices having different screen size.

responsive-sm for devices smaller than landscape.
responsive-md for devices smaller portrait tablet.
responsive-lg for devices smaller than landscape tablet.

UI
Using this simple ionic grid system we can make our applications User Interface to suit our applications needs.

Further ..
For further configuration, each class uses a Sass variable that can be changed to your liking. There’s also a responsive-grid-break mixin you can use to create your own grid classes.