CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-4
KestVir
KestVir

Reputation: 350

Aligning Text And Images

I'm having difficulties with a particular section. The desired goal, is for it to look like this.

And I'm getting this.

.timeline {
    text-align: center;
}

#about-us {
    ul {
        &:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            margin-left: -1.5px;
            content: '';
            background-color: #f1f1f1;
            z-index: -1;
        }
    }
    img {
        width: 150px;
        height: 150px;
        border-radius: 50%;

    }
}

.timeline-img {
    border: 7px solid #f1f1f1;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
}

.timeline-1,
.timeline-3 {
    .timeline-info {
        float: left;
        width: 45%;
        text-align: right;
    }
}

.timeline-2,
.timeline-4 {
    .timeline-info {
        float: right;
        width: 45%;
        text-align: left;
    }
}

Also, the grey line in the end overflows a little bit, and I can't make it as long as the last image.

Upvotes: 2

Views: 56

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105843

You can use some of the bootstrap class to reverse flow

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

  • HTML possible update
<ul class="timeline">
    <li class="timeline-1 d-flex flex-row-reverse"></li>
    <li class="timeline-2 d-flex"></li>
    <li class="timeline-3 d-flex flex-row-reverse"></li>
    <li class="timeline-4 d-flex"></li>
    <li class="timeline-5 "></li>
</ul>

Then, you can add a pseudo to fill an empty space of same width of timeline-info :

  • CSS possible update
.timeline li:before {
  content:'';
  width: 45%;
}

https://codepen.io/gc-nomade/pen/gxJvBj

Upvotes: 2

Related Questions