0

Using Bootstrap V5.0 framework, I wanted to make a div with a circle image and some content. I know how to to use a 50% radius to create a circle, but I don’t know how to make the height of the div match the width, so I keep getting an oval shape. I wanted to make the div including image a proper circle with background color. How can I make the height always the same as the width on different display sizes so I get a proper circle?

 <div class="col-4 py-4">
     <div class="d-flex">
         <div style="border-radius: 50%;" class="flex-shrink bg-dark p-3">
             <img class="img-fluid" src="assets/img/icons/quick_setup-sm.png" alt=""/>
         </div>
         <div class="flex-grow">
             <h6 class="text-uppercase fw-bold">quick setup</h6>
             <p>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
         </div>
     </div>
 </div>
Rich DeBourke
  • 1,890
  • 2
  • 11
  • 11
Ferdous Hasan
  • 1
  • 2
    try giving your containing div a fixed width and height, that div is an oval most likely because of your image aspect ratio – cMarius Apr 20 '21 at 11:32
  • In complement of @cMarius : try to give the same fixed width and height – SeeoX Apr 20 '21 at 11:46
  • PLEASE REOPEN – Question is for BS-5 and how to *responsively* have a div w/ same H&W. BS-5 has a new `ratio` class to manage aspect ratios that replaces BS-4’s `embed-responsive` class. First alt answer, **Avoid elliptical shape…** says to have same H & W. Second alt answer , **Why can’t I make…** is also about same H & W. OP noted the 50% radius and was asking, how to get the H same as the W in BS-5. The question https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css with its 32 answers has the solution, but it’s hard to find and the BS-5 classes are easier. – Rich DeBourke Apr 22 '21 at 12:56
  • @Rich if you want a question reopened, or a duplicate link changed, the way to do that is posting the request to [StackOverflow Meta](https://meta.stackoverflow.com/), not complaining in comments. – Dour High Arch Apr 24 '21 at 18:27
  • @Dour — The Meta Help Center https://meta.stackexchange.com/help/reopen-questions says to *first* edit the question (which I did and it was accepted around 3 hours prior to your comment) and *additionally* to “Leave a comment on the question itself calling for it to be reopened.” I haven’t tried to get a question reopened before, but if it’s more effective / more polite to post the request in Meta, I’ll delete my previous comment and post something in Meta – please let me know what’s the best way to proceed. – Rich DeBourke Apr 24 '21 at 19:21

1 Answers1

0

As you’re using Bootstrap 5, you can use Bootstrap’s ratio helper class to get a proper square and then you can create a proper circle (rather than an oval). The square will keep its ratio as the screen size changes.

A 1x1 ratio is provided as a standard (along with 4x3, 16x9, and 21x9), and while you didn’t specify what exact media object you’re using, you can put a picture in the division (and not just as a background image).

You could also put a video. I created a 640x640 text video and while it starts out small (see the image below), once it starts playing, it expands to fill the space. I also tried embedding a YouTube video, but it always stayed small (to fit within the circle for some reason).

Comparing the starting video image with the ending image

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-7 col-sm-5 col-md-4 col-lg-3">
            <div class="ratio ratio-1x1 bg-success overflow-hidden border border-primary border-2" style="border-radius: 50%;">
                <img src="https://via.placeholder.com/400x400.png">
            </div>
        </div>
        <div class="col-4 col-sm-3 col-lg-2">
            <h6 class="text-uppercase fw-bold">quick setup</h6>
            <p>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
        </div>
    </div>
</div>

There is a background color (green), although it's covered by the image.

Rich DeBourke
  • 1,890
  • 2
  • 11
  • 11