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.

Answer 1

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>

Answer 2

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>