Spacer

Utility component for horitonzal and vertical spacing between elements.

How to space

Simply import the spacer component

$ import {Spacer} from 'axelra-styled-bootstrap-grid'; 

And pass it a prop xN, where N is the spacing you want to use.

App.tsx

import {Spacer, Container, Col, Row, Spacer } from 'axelra-styled-bootstrap-grid'; 


export const App = () => {
  return (
    <Container fluid>
      <Spacer x2 />
      <Row>
        <Col xs={1} />
        <Col xs={10}>
          <h1>Wonderful Title</h1>
          <Spacer x7 />
        </Col >
        <Col xs={1} />
      </Row>
    </MyContainer>
  );
};

Props	Value for horizontal and vertical Spacing
x1	SPACING
x2	SPACING * 2
x3	SPACING * 3
x4	SPACING * 4
x5	SPACING * 5
x6	SPACING * 6
x7	SPACING * 7
x8	SPACING * 8
x9	SPACING * 9
x10	SPACING * 10