How to create a circular element with horizontal alignment using CSS in a Bootstrap

Question

How to create a circular element with horizontal alignment using CSS in a Bootstrap

Looking to center a CSS circle with an image and label overlay in the circle while ensuring it stays horizontally centered in a bootstrap column. Any tips or suggestions are appreciated.

For reference, please visit this JSFIDDLE link

<div class="container">
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <div class="circle1Wrapper">
            <div class="circle-textSmall bubble1outer">
                <div> <span class="bubbleIconSmall">
                        <img src="http://lorempixel.com/40/40/" />
                    </span><span class="bubbleHeadSmall">label</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>

CSS:

.circle1Wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999;
    margin: auto;
    border: 1px solid;
}
.bubble1outer {
    position: absolute;
}
.circle-textSmall div {
    width: 125px;
}
.circle-textSmall div {
    float: left;
    width: 250px;
    padding-top: 15%;
    line-height: 1em;
    margin-top: -0.5em;
    text-align: center;
    color: #000;
}
span.bubbleIconSmall > img {
    width: 45%;
    height: auto;
}
.circle-textSmall:after {
    width: 125px;
    padding-bottom: 125px;
    margin-left: 50%;
}
.circle-textSmall:after {
    content:"";
    display: block;
    width: 250px;
    height: 0;
    padding-bottom: 250px;
    background: #ccc;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Desired outcome for the design:

css twitter-bootstrap

Answer 1

Answer №1

@metaxos, I had intended to leave this as a comment, but it turned out to be quite lengthy.

Even if you have found a solution that works for you, I suggest considering tidying up the code; observe how the original example trimmed down most of the code and retained just one div:

.innerwrapper is redundant (why not apply that style directly to #myCircleDiv?);
The same goes for the div containing the image (you can apply that style directly to the image!);
Additionally, the img itself can be eliminated too ( utilize it as the background of #myCircleDiv).

This is my perspective (feel free to disregard it), however, I believe aiming for something cleaner and easier to maintain would be beneficial rather than a more intricate and unnecessary structure (unless explicitly requested by the user/customer). Simplicity is key.

In line with this approach, the following (view it in action on this jsfiddle):

<!-- HTML -->
<div id="myCircleDiv">LABEL</div>

/* CSS */
#myCircleDiv {
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    line-height:375px;
    text-align:center;
    color:white;
    background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}

Appears neater compared to the following:

<!-- HTML -->
<div id="myCircleDiv">
    <div class="innerWrapper">
        <div>
            <img src="http://lorempixel.com/50/50/" />
        </div>
        <div>LABEL</div>
    </div>
</div>

/* CSS */
#myCircleDiv {
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    background-color:#ccc;
    background-size:250px 250px;
    line-height:250px;
    text-align:center;
    color:white;
}

.innerWrapper {
    width: 100%;
    height: 250px;
}
.innerWrapper div {
    float: left;
    height: 125px;
    width: 100%;
    line-height: 125px;
}

.innerWrapper div img {
    margin-top: 38px;
}

The outcome remains identical. However, once again... that's simply my viewpoint :)

Answer 2

@metaxos, I had intended to leave this as a comment, but it turned out to be quite lengthy.

Even if you have found a solution that works for you, I suggest considering tidying up the code; observe how the original example trimmed down most of the code and retained just one div:

.innerwrapper is redundant (why not apply that style directly to #myCircleDiv?);
The same goes for the div containing the image (you can apply that style directly to the image!);
Additionally, the img itself can be eliminated too ( utilize it as the background of #myCircleDiv).

This is my perspective (feel free to disregard it), however, I believe aiming for something cleaner and easier to maintain would be beneficial rather than a more intricate and unnecessary structure (unless explicitly requested by the user/customer). Simplicity is key.

In line with this approach, the following (view it in action on this jsfiddle):

<!-- HTML -->
<div id="myCircleDiv">LABEL</div>

/* CSS */
#myCircleDiv {
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    line-height:375px;
    text-align:center;
    color:white;
    background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}

Appears neater compared to the following:

<!-- HTML -->
<div id="myCircleDiv">
    <div class="innerWrapper">
        <div>
            <img src="http://lorempixel.com/50/50/" />
        </div>
        <div>LABEL</div>
    </div>
</div>

/* CSS */
#myCircleDiv {
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    background-color:#ccc;
    background-size:250px 250px;
    line-height:250px;
    text-align:center;
    color:white;
}

.innerWrapper {
    width: 100%;
    height: 250px;
}
.innerWrapper div {
    float: left;
    height: 125px;
    width: 100%;
    line-height: 125px;
}

.innerWrapper div img {
    margin-top: 38px;
}

The outcome remains identical. However, once again... that's simply my viewpoint :)

How to create a circular element with horizontal alignment using CSS in a Bootstrap

Answer №1

Similar questions

Displaying negative values highlighted in red on Datatables platform

Combining Images and Navigation in Next.js using Tailwind CSS

Toggle the div if the if statement is true; otherwise, hide the broken

What is the proper way to reference automatically generated class names within nested style rules when using makeStyles in Material-UI?

What could be causing the responsiveness issue with my react slick carousel?

Reposition icons accordingly while incorporating a new set of icons

Having trouble unselecting the previous item when selecting a new item in Reactjs

Launching a web application directly from a USB drive

Show the chosen option when the textarea is no longer in focus

The menu lacks responsiveness

Tips for Fixing CSS Issues

How can I optimize Javascript and CSS that are being used on my website but are not physically hosted on my website?

What is the method for adjusting the text color in an HTML document?

Bootstrap struggles to create panels of uniform size

Enable selecting text within a Bootstrap table

How to apply jQuery addClass to only the following target element and not all elements on the entire webpage

Unable to display image using HTML and CSS

How can I establish a backup plan for an image with transparency?

"Ensuring a DIV element has a height of 100% within

Issues encountered in loading JavaScript with jQuery script