Flex one big feather icon on left-side, title and description on right-side-CodePudding

I want to create flex style UI that looks like this

what I can do so far is split the UI using col-5 col-2 col-5 from bootstrap, and use flex to create the col-5 UI section (left and right), here's my code

<div >
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <i data-feather="upload" class=avatar-icon></i>
                            </div>
                            <div>
                                <p >Lorem ipsum</p>
                                <p>lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                    <div >
                        <div  style="height: 50px;">
                            <div ></div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div >
                                <i data-feather="user-plus" class=avatar-icon></i>
                            </div>
                            <div>
                                <p >Lorem ipsum</p>
                                <p>lorem ipsum dolor sit amet lorem ipsum</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here's the result

the results don't match my expectations, is there a class from bootstrap that I haven't added? or is there another way I can get the result like the mockup I want?

CodePudding user response：

I recommend to remove the col-width given to the vertical border and instead add it separately from the css. Also, use the justify-content-center class of Bootstrap in the div with the d-flex class. I hope this is what you are trying to achieve.

.col-6::after {
  content: "";
  position: absolute;
  border-right: 2px dotted #000;
  height: 75px;
  top: 10px;
  left: 50%;
  display: block;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <div >
                <i data-feather="upload" class=avatar-icon></i>
              </div>
              <div>
                <p >Lorem ipsum</p>
                <p>lorem ipsum dolor sit amet lorem ipsum</p>
              </div>
            </div>
          </div>

          <div >
            <div >
              <div >
                <i data-feather="user-plus" class=avatar-icon></i>
              </div>
              <div>
                <p >Lorem ipsum</p>
                <p>lorem ipsum dolor sit amet lorem ipsum</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I also created a separate code if you choose to achieve this without using Bootsrap or Flex and instead use the CSS Grid Layout. :)

.card-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card-section .card {
  display: grid;
  grid-template-columns: 100px 1fr;
  justify-self: center;
  align-items: center;
}

.card-section .card:first-child::after {
  content: "";
  position: absolute;
  border-right: 2px dotted #000;
  height: 100px;
  top: 10px;
  left: 50%;
  display: block;
}

.card-section .card .icon-holder {
  background: #000;
  width: 75px;
  height: 75px;
  border-radius: 15px;
}

<div >
  <div >
    <div >
      <i ></i>
    </div>

    <div >
      <h2>
        Title
      </h2>
      <p>
        Description
      </p>
    </div>
  </div>

  <div >
    <div >
      <i ></i>
    </div>

    <div >
      <h2>
        Title
      </h2>
      <p>
        Description
      </p>
    </div>
  </div>
</div>