Two Circles side by side (responsive)

Question

I am trying to make two circles appear side by side (responsive).

HTML

<div class="col-sm-12">
  <div class="circle col-sm-6">450 reviews</div>
  <div class="circle col-sm-6">4.2 million readers</div>
</div>

CSS

.circle{
  width:100px;
  height:100px;
  border-radius:100px;
  font-size:20px;
  color:#fef;
  line-height:100px;
  text-align:center;
  background:#000
}

But with this CSS, the circles are below each other.

Inside the circle, is it also possible to have "450" in one line and "reviews" below it. Similarly "4.2 million" in one line and "readers" in another?

Live Demo

Possible duplicate of [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — Michał Perłakowski, Feb 13 '18 at 16:28
Thanks @Pete. When I add the br tag, it shows only the first line. The second line is probably thrown out of the circle. — CuriousDev, Feb 13 '18 at 16:31
Your code seems to be working fine, all I have changed is the breakpoint (sm to xs) and everything works: https://jsfiddle.net/DTcHh/42567/ — maxshuty, Feb 13 '18 at 16:33
I don't see any Bootstrap being used in your "live demo". Also, the circles have fixed width and height. Why is this question tagged with Bootstrap if you aren't actually using Bootstrap anywhere? And what exactly is supposed to be "responsive" if the circles have fixed width and height?? — WebDevBooster, Feb 13 '18 at 17:12
Are you using Bootstrap?? Bootstrap will stack those `.col-sm-6` elements when the device width < 765px so you would need to add an additional media-query to get them side by side on small devices. If you're NOT using bootstrap then just use `display:inline-block;` rather than `float:left;` — Moob, Feb 13 '18 at 17:23

score 0 · Answer 1 · answered Feb 13 '18 at 16:27

0

try llike this:

  .circle
   {
    float:left; //to put side by side
    width:100px;
    height:100px;
    border-radius:100px;
    font-size:20px;
    color:#fef;
    line-height:100px;
    text-align:center;
    background:#000
  }

answered Feb 13 '18 at 16:27

Coskun Ozogul

2,389
1
20
32

Thanks and can you also answer how to have "450" in one line and "reviews" below it. Similarly "4.2 million" in one line and "readers" in another? br tag is not doing the trick. – CuriousDev Feb 13 '18 at 16:31

score 0 · Answer 2 · edited Feb 13 '18 at 18:55

0

Ok I would make your items inline flex to make them on the same line (and to centre the content), and remove your boostrap classes:

.circle {
  display: inline-flex;         /* use this so theat items are on same line */
                                
  justify-content: center;      /* by using above, you can vertical and horizontal align without the need for a stupid line-height hack*/
  align-items: center;
  text-align: center;
  
  margin-right: 10px;
  width: 150px;
  height: 150px;
  font-size: 20px;
  border-radius: 50%;
  color: #fef;
  background: #000
}

<div class="col-sm-12">
  <div class="circle">450
    <br> reviews </div>
  <div class="circle">4.2 million
    <br> readers </div>
</div>

edited Feb 13 '18 at 18:55

Temani Afif

245,468
26
309
415

answered Feb 13 '18 at 16:38

Pete

57,112
28
117
166

Fantastic. Will this work on all browsers including IE 10, 11? – CuriousDev Feb 13 '18 at 16:42
Not sure about ie10 - think it should do but definitely works in ie11 – Pete Feb 13 '18 at 16:42
Ok let me try and see. Cheers. – CuriousDev Feb 13 '18 at 16:43

score 0 · Answer 3 · edited Feb 13 '18 at 18:55

You need to change your markup a little bit by using row and container-fluid...

Also you will need to wrap your inner text into a <p> tag and use transform:translate(-50%, -50%) and position:absolute combination to center the text

Stack Snippet

.circle {
  float: left;
  margin-right: 10px;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  font-size: 16px;
  color: #fef;
  text-align: center;
  background: #000;
  position: relative;
}

.circle p {
  margin: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="conatiner-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="circle">
        <p>450
          <br> reviews</p>
      </div>
      <div class="circle">
        <p>4.2 million
          <br> readers</p>
      </div>
    </div>
  </div>
</div>

You mistyped "container-fluid" to "conatiner-fluid" but I get your point. Thanks. — CuriousDev, Feb 13 '18 at 23:56

Two Circles side by side (responsive)

3 Answers3