CODEWITHSUNDEEP
htmlcssbootstrap-4
Anil Parshi
Anil Parshi

Reputation: 913

Bootstrap, CSS layout design fixing

I've got a design of the section as displayed below, enter image description here
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 class="row content-test-section">
    <div class="col-lg-6 block-div">
      <h3 class="section-head-number">01</h3>
      <div class="vertical-line">
        <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 class="col-lg-6 block-div">
      <h3 class="section-head-number">02</h3>
      <div class="vertical-line">
        <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.

Upvotes: 0

Views: 72

Answers (1)

Mohit Kushwaha
Mohit Kushwaha

Reputation: 1041

.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 class="d-flex flex-row">
    <div class="flex-column">
    <div class="col-lg-7 block-div">
      <h3 class="section-head-number">01</h3>
      <div class="vertical-line">
        <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 class="col-lg-7 block-div mt-5">
      <h3 class="section-head-number">03</h3>
      <div class="vertical-line">
        <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 class="col-lg-7 block-div mt-5">
      <h3 class="section-head-number">05</h3>
      <div class="vertical-line">
        <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 class="flex-column">
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">02</h3>
      <div class="vertical-line">
        <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 class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">04</h3>
      <div class="vertical-line">
        <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 class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">06</h3>
      <div class="vertical-line">
        <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>

Upvotes: 1

Related Questions