title: How do I position circles in a circle with css/bootstrap?
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/cIdkg.png" alt="https://i.stack.imgur.com/cIdkg.png]"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='circle-container'&gt;
    &lt;a href='#' class='center'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
    &lt;a href='#' class='deg2'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
    &lt;a href='#' class='deg3'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
    &lt;a href='#' class='deg4'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
    &lt;a href='#' class='deg5'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
    &lt;a href='#' class='deg6'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
    &lt;a href='#' class='deg1'&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>First I tried searching bootstrap's docs for something that can help so I just did this and can't figure it out.</p>