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

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> 

Answer 2

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 3

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> 

Answer 4

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>