import React, { Component } from 'react';
import styled from 'styled-components';

import { Container, Row, Col } from './styled-bootstrap-grid';

const TitleRow = styled(Row)`
  margin-bottom: 10px;
`
const Pre = styled.pre`
  display: inline-block;
  width: 100%;
  background-color: #EEE;
  margin: 0;
  padding: 10px;
  white-space: normal;
`

class App extends Component {
  render() {
    return (
      <Container>
        <TitleRow>
          <Col col={12}>
            <h3>Auto-layout columns: Equal-width</h3>
            <a href="https://getbootstrap.com/docs/4.0/layout/grid/#equal-width">Bootstrap documentation</a>
          </Col>
        </TitleRow>
        <Row>
          <Col col>
            <Pre>
              &lt;div class="col-5" /&gt;
            </Pre>
          </Col>
          <Col col>
            <Pre>
              &lt;div class="col-4" /&gt;
            </Pre>
          </Col>
        </Row>
        <TitleRow>
          <Col col={12}>
            <h3>Auto-layout columns: Setting one column width</h3>
            <a href="https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width">Bootstrap documentation</a>
          </Col>
        </TitleRow>
        <Row>
          <Col col>
            <Pre>
              &lt;div class="col" /&gt;
            </Pre>
          </Col>
          <Col col={2}>
            <Pre>
              &lt;div class="col-2" /&gt;
            </Pre>
          </Col>
          <Col col>
            <Pre>
              &lt;div class="col" /&gt;
            </Pre>
          </Col>
        </Row>
      </Container>
    );
  }
}

export default App;

@@ -1563,24 +1563,675 @@
      %3C/Row%3E%0A
+        %3CTitleRow%3E%0A          %3CCol col=%7B12%7D%3E%0A            %3Ch3%3EOffsetting columns: Offset classes%3C/h3%3E%0A            %3Ca href=%22https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes%22%3EBootstrap documentation%3C/a%3E%0A          %3C/Col%3E%0A        %3C/TitleRow%3E%0A        %3CRow%3E%0A          %3CCol offset=%7B6%7D col=%7B6%7D%3E%0A            %3CPre%3E%0A              &lt;div class=%22col-6 offset-6%22 /&gt;%0A            %3C/Pre%3E%0A          %3C/Col%3E%0A        %3C/Row%3E%0A        %3CRow%3E%0A          %3CCol smOffset=%7B3%7D sm=%7B6%7D col=%7B12%7D xl=%7B5%7D xlOffset=%7B0%7D%3E%0A            %3CPre%3E%0A              &lt;div class=%22col-sm-6 offset-sm-3 col-12 col-xl-5 offset-xl-0%22 /&gt;%0A            %3C/Pre%3E%0A          %3C/Col%3E%0A        %3C/Row%3E%0A
       %3C/Cont

update example