Steps

import Steps, { Step } from '../components/Steps'

{/* Default inline steps */}
<Steps>
  <Step active>Basic info</Step>
  <Step active>Company details</Step>
  <Step>Job details</Step>
  <Step>Post a job</Step>
</Steps>

import Steps, { Step } from '../components/Steps'

{/* Clickable inline steps (links) */}
<Steps>
  <Step href='#' active>Basic info</Step>
  <Step href='#'>Company details</Step>
  <Step href='#'>Job details</Step>
  <Step href='#'>Post a job</Step>
</Steps>

import Steps, { Step } from '../components/Steps'

{/* Vertical inline steps */}
<Steps vertical>
  <Step active>
    <h5 className='mb-2 pb-1'>2019</h5>
    <p className='mb-0'>Odio velit, massa augue etiam in parturient volutpat orci. Pulvinar amet, at est ac curabitur mauris, semper cursus metus. Imperdiet sed massa amet at turpis. Dis risus, donec in ac ultricies tempor eu, amet.</p>
  </Step>
  <Step active>
    <h5 className='mb-2 pb-1'>2020</h5>
    <p className='mb-0'>Vitae erat ornare facilisi id sollicitudin turpis tempus, semper. Velit integer et volutpat, a. Massa ut amet amet, vitae nunc nulla sed.</p>
  </Step>
  <Step>
    <h5 className='mb-2 pb-1'>2021</h5>
    <p className='mb-0'>Ut mattis nascetur aliquam neque velit nunc sed. Morbi congue mauris amet ultrices molestie tellus proin odio diam. Feugiat elit, habitasse egestas egestas id nec potenti. Donec convallis donec tristique mattis et viverra.</p>
  </Step>
  <Step>
    <h5 className='mb-2 pb-1'>2022</h5>
    <p className='mb-0'>Tempor nullam pellentesque suspendisse nec. Arcu sagittis sed ut diam in ultrices. Leo lacinia feugiat interdum pellentesque nulla vitae duis.</p>
  </Step>
</Steps>

import Steps, { Step } from '../components/Steps'

{/* Light inline steps */}
<Steps light>
  <Step active>Basic info</Step>
  <Step active>Company details</Step>
  <Step>Job details</Step>
  <Step>Post a job</Step>
</Steps>

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'          
import StepCard from '../components/StepCard'

{/* Card based steps */}
<Row>
  <Col md={4}>
    <StepCard
      number='01'
      title='Create a Job Ad'
      text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
    />
  </Col>
  <Col md={4}>
    <StepCard
      number='02'
      title='Select a Pricing Plan'
      text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
    />
  </Col>
  <Col md={4}>
    <StepCard
      number='03'
      title='Post Your Job'
      text='Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.'
    />
  </Col>
</Row>

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'          
import StepCard from '../../components/StepCard'

{/* Clickable card based steps (links) */}
<Row>
  <Col md={4}>
    <StepCard
      href='#'
      number='01'
      title='Create a Job Ad'
      text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
    />
  </Col>
  <Col md={4}>
    <StepCard
      href='#'
      number='02'
      title='Select a Pricing Plan'
      text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
    />
  </Col>
  <Col md={4}>
    <StepCard
      href='#'
      number='03'
      title='Post Your Job'
      text='Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.'
    />
  </Col>
</Row>

import StepCard from '../../components/StepCard'

{/* Center aligned step */}
<StepCard
  number='01'
  title='Create a Job Ad'
  text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
  align='center'
/>

{/* Right aligned step */}
<StepCard
  number='02'
  title='Select a Pricing Plan'
  text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
  align='end'
/>

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'          
import StepCard from '../../components/StepCard'

{/* Light card based steps */}
<Row>
  <Col md={4}>
    <StepCard
      number='01'
      title='Create a Job Ad'
      text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
      light
    />
  </Col>
  <Col md={4}>
    <StepCard
      number='02'
      title='Select a Pricing Plan'
      text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
      light
    />
  </Col>
  <Col md={4}>
    <StepCard
      number='03'
      title='Post Your Job'
      text='Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.'
      light
    />
  </Col>
</Row>