> For the complete documentation index, see [llms.txt](https://lucas-pelloni.gitbook.io/styled-bootstrap-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lucas-pelloni.gitbook.io/styled-bootstrap-grid/spacer.md).

# Spacer

Utility component for horitonzal and vertical spacing between elements.

## How to space

Simply import the spacer component

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

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

{% code title="App.tsx" %}

```jsx
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>
  );
};

```

{% endcode %}

| 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`                            |