overlapping div element


Topic: overlapping div element

Yassir Rabiea asked 3 years 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 3 years 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

Open

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