How do I position circles in a circle with css/bootstrap?

Question

I was wondering how I can position circles/images within a circle. I've tried positioning them by putting them in a container and rotating them around a circle but I can't figure out how to make it like the image below:

.deg1 {
  transform: rotate(270deg) translate(6em) rotate(-270deg);
  top: 50px;
  position: relative;
}


/* 1 */

.deg2 {
  transform: translate(6em);
}


/* 2 */

.deg3 {
  transform: rotate(45deg) translate(6em) rotate(-45deg);
}


/* 3 */

.deg4 {
  transform: rotate(135deg) translate(6em) rotate(-135deg);
}


/* 4 */

.deg5 {
  transform: translate(-6em);
}


/* 5 */

.deg6 {
  transform: rotate(225deg) translate(6em) rotate(-225deg);
}


/* 6 */

.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

First I tried searching bootstrap's docs for something that can help so I just did this and can't figure it out.

Welcome to Stack Overflow! Questions seeking debugging help should include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it within the question itself. Questions without a clear problem statement are not useful to other readers. Please see: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Gerardo BLANCO, Feb 20 '18 at 18:52
Thank you. I updated it to provide a clear problem, included all the code necessary to replicate. — user2356301, Feb 20 '18 at 18:55
`%= image_tag "goldwind.png" %` makes it unable to reproduce the issue, but anyway... tehre are several approaches for that... and none of them uses bootstrap. Why do you want to use bootstrap for this? — Facundo Corradini, Feb 20 '18 at 19:05
Sorry please replace `<%= image_tag "goldwind.png" %>` with text or your own image if you please. I was just wondering if I could use bootstrap for this. If not then I'm trying to get the above code to position the way the circles are in the image. I am having trouble putting them in a circle and then having two on the sides on top of each other. — user2356301, Feb 20 '18 at 19:11

Paulie_D · Answer 1 · 2018-02-20T21:04:58.047

I'd use Javascript/jquery to set the positions of each outer circle.

Jquery shamelessly stolen from ThiefMaster♦ and their answer at this Q & A

var radius = 50; // adjust to move out items in and out 
var fields = $('.container div'),
  container = $('.container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

body {
  display: flex;
  height: 100vh;
  overflow:hidden;
}

.container {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid grey;
  background: #f00;
  animation: spin 3s infinite linear
}

.container div {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
}

.container div:first-child {
  background: blue;
}

@keyframes spin {
  100% {
    transform: rotate(1turn)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

score 1 · Accepted Answer · answered Feb 20 '18 at 19:23

Without translate and transform, you can even position by just using top,left,'bottom' and 'right'.

Make sure to use px as it will break if you use % values.

You need to do some modifications as per your image.

// .deg1 {
//   transform: rotate(270deg) translate(6em) rotate(-270deg);
// } /* 1 */
// .deg2 {
//   transform: translate(6em);
// } /* 2 */
// .deg3 {
//   transform: rotate(45deg) translate(6em) rotate(-45deg);
// } /* 3 */
// .deg4 {
//   transform: rotate(135deg) translate(6em) rotate(-135deg);
// } /* 4 */
// .deg5 {
//   transform: translate(-6em);
// } /* 5 */
// .deg6 {
//   transform: rotate(225deg) translate(6em) rotate(-225deg);
// } /* 6 */
.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

.center img {}

.deg1 img {
  position: relative;
  top: 100px;
}

.deg2 img {
  position: relative;
  bottom: 100px;
}

.deg3 img {
  position: relative;
  top: 50px;
  left: 85px;
}

.deg4 img {
  position: relative;
  top: 50px;
  right: 85px;
}

.deg5 img {
  position: relative;
  bottom: 50px;
  right: 85px;
}

.deg6 img {
  position: relative;
  bottom: 50px;
  left: 85px;
}

<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

Facundo Corradini · Answer 3 · 2018-02-20T19:39:19.500

You can just use CSS to position the elements. For instance, here's an example using CSS grid.

I've declared the grid as 6 rows by 6 columns, in order to position the elements leaving the corners empty.

.circle-container {
  width: 24em; height: 24em;
  border-radius: 50%;
  border:2px solid red;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.circle-container a {
    display: block;
    border:2px solid grey;
    background:white;
    border-radius:50%;
    text-align:center;
}

.deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */
.deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */
.deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */
.deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */
.deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */
.deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */
.deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */


/*bring the lateral circles closer to the center*/
.deg2, .deg5{margin:0 -1em 0 1em;}
.deg3, .deg6{margin: 0 1em 0 -1em}

body{
  background:steelblue;
}

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

If you don't want to use CSS grid (perhaps because of IE11) you can also use whatever grid-like technique you prefer, maybe floats, inline-blocks, maybe even flexbox, positioning the elements in three lines and pushing down the ones on the side.

here's with display:inline-block, which would normally return

123
456
7

and some transforms to compensate that

.circle-container {
  width: 240px; height: 240px;
  border:2px solid red;
  font-size:0;/*typical inline-block whitespace hack*/
  border-radius:50%;
}
.circle-container a {
    display:inline-block;
    width:calc(100% / 3);
    height:calc(100% / 3);
    border:2px solid grey;
    background:white;
    text-align:center;
    font-size:1rem;
    border-radius:50%;
}
.deg1, .deg3, .deg4, .deg6{
  transform:translateY(50%);
}

.deg7{
  transform:translateX(100%)
}

body{
  background:steelblue;
}
*{box-sizing:border-box; margin:0; padding:0;}

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

Temani Afif · Answer 4 · 2018-02-20T19:30:21.223

You can try to adjust some margin and the width of container then no need to complicate with transform:

.circle-container {
  position: relative;
  width: 12em;
  height: 12em;
  border:1px solid;
  border-radius: 50%;
  margin: 0.75em auto 0;
  transform:rotate(90deg);
}

.circle-container a {
  display: inline-block;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: blue;
  margin:-0.3em -0.1em;
}
a:first-child,
a:nth-child(6) {
  margin-left:2em;
}
a:nth-child(1),a:nth-child(2) {
  margin-top:0.3em;
}

<div class='circle-container'>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</div>

How do I position circles in a circle with css/bootstrap?

4 Answers4