Topic: overlapping div element

Yassir Rabiea free asked 11 months ago


How can I get this using bootstrap?

*circles are overlappedenter image description here


HTML:

<div class="container mt-10 bg-light">
        <div class="row">
            <div class="col-6 bg-warning">
                <div class="d-flex justify-content-center m-5">
                    <div class="d-flex justify-content-start">
                        <div
                            class="d-flex justify-content-center align-items-center border border-secondary rounded-circle sex2">
                            M</div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <div
                            class="d-flex justify-content-center align-items-center border-secondary border rounded-circle BG2">
                            BG
                        </div>
                    </div>

                    <div class="d-flex justify-content-end align-items-end">
                        <div
                            class="d-flex justify-content-center align-items-center border-secondary border rounded-circle age2">
                            A
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6"></div>
        </div>

css:

.sex2 {
  width: 4rem;
  height: 4rem;
}
.age2 {
  width: 4rem;
  height: 4rem;
}
.BG2 {
  width: 10rem;
  height: 10rem;
}

Is there a better way?

  • image for demonstration purposes.

Michał Duszak staff commented 11 months ago

There is nothing wrong in your code. Could you specify exactly what functionality are you trying to achieve?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.0
  • Device: pc
  • Browser: edge
  • OS: windows
  • Provided sample code: No
  • Provided link: No