Positioning a div circle on the center of four col-md-6 bootstrap div

Question

I want to achieve a layout as shown in the figure below:

I have 4 col-md-6 dive with a background image (and size cover), i want to put on top of the center of them a circle with a text (completely implemented in CSS).

I want to keep the design responsive so I was wondering which is the best way of dealing with absolute and relative positioning and responsiveness?

Answer 1

you can make your row div position: relative create a circle div that is position: absolute within the row (next to your col-md-6 divs) and center the the circle div within the row using top, left and negative margin s

something like:

 .container { background-color: rgba(255, 255, 0, .5); } .row-with-medallion { position: relative; font-size: 24px; font-weight: bold; } .row-with-medallion .quadrant { color: #027BC4; text-align: center; padding: 30px; margin: 45px 0; background: white; } .the-medallion { position: absolute; left: 50%; top: 50%; margin-top: -75px; margin-left: -75px; width: 150px; height: 150px; border-radius: 50%; background-color: rgba(2, 123, 196, 1); color: #B8BFC5; text-align: center; line-height: 150px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="row row-with-medallion"> <div class="col-md-6 quadrant">col-md-6</div> <div class="col-md-6 quadrant">col-md-6</div> <div class="col-md-6 quadrant">col-md-6</div> <div class="col-md-6 quadrant">col-md-6</div> <div class="the-medallion">???</div> </div> </div>