Skip to main content

Row and Col

12 Cols System.

Usage​

import React from 'react';
import {  Row , Col } from 'qdm-component-library';

function App() {
  return ( 
      <Row spacing={2}> 
      <Col xs={12} md={12} sm={12} lg={12}>col-12</Col>
      </Row>
   );
}
export default App;

Reference​

Props​

here all the list of Props you can use for Row and Col Components

direction​

In Qdm Component we provide 4 types of direction.

  • row
  • row-reverse
  • column
  • column-reverse
import React from 'react';
import {  Row , Col } from 'qdm-component-library';

function App() {
  return ( 
      <Row direction='row'> 
      <Col xs={12} md={12} sm={12} lg={12}>col-12</Col>
      </Row>
   );
}
export default App;

alignItems​

In Qdm Component we provide 5 types of alignItems.

  • flex-start
  • center
  • flex-end
  • stretch
  • baseline
import React from 'react';
import {  Row , Col } from 'qdm-component-library';

function App() {
  return ( 
      <Row alignItems='center'> 
      <Col xs={12} md={12} sm={12} lg={12}>col-12</Col>
      </Row>
   );
}
export default App;

justify​

In Qdm Component we provide 6 types of justify.

  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
  • space-evenly
import React from 'react';
import {  Row , Col } from 'qdm-component-library';

function App() {
  return ( 
      <Row justify='center'> 
      <Col xs={12} md={12} sm={12} lg={12}>col-12</Col>
      </Row>
   );
}
export default App;

inLineStyles​

props give addition props to the Row and Col elements type Object