Bootstrap, CSS layout design fixing-CodePudding

I've got a design of the section as displayed below,
I need to create the same using bootstrap/CSS, Here's what I tried so far

.content-test-section {
    padding: 10px;
}
h3.section-head-number {
    color: #5fa936;
}
.vertical-line {
    border-left: 5px solid black;
    height: 150px;
    margin: 10px;
    padding: 10px 20px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<div >
    <div >
      <h3 >01</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    <div >
      <h3 >02</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
</div>

This is quite time consuming for me and I need to finish it asap. I'd really appreciate if someone could help me out with it.

CodePudding user response：

.content-test-section {
    padding: 10px;
}
h3.section-head-number {
    color: #5fa936;
}
.vertical-line {
    border-left: 5px solid black;
    height: 150px;
    margin: 10px;
    padding: 10px 20px;
}
.mt-70px{
 margin-top:70px;
}
.d-flex{
  display:flex;
}
.mt-5{
  margin-top:50px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <div >
    <div >
    <div >
      <h3 >01</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    <div >
      <h3 >03</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div >
      <h3 >05</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    </div>
     <div >
      <div >
      <h3 >02</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div >
      <h3 >04</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div >
      <h3 >06</h3>
      <div >
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    </div>
</div>