CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3
Schneider
Schneider

Reputation: 2506

Making round background in Bootstrap 3

I have some issues to make round color inside element, to look like this

enter image description here

This is Bootstrap 3 code what I have for now

<div class="row">
    <div class="col-md-6 pull-left" itemscope itemtype="http://schema.org/logo">   
        <img class="img-responsive" src="http://placehold.it/350x150" alt="">    
    </div>
    <div class="col-md-6">
        <p>Total Job Position Available <span class="badge pull-right">8</span>
        </p>    
    </div>
</div>

The problem I have in badge, how to make it like that and to align "Total Job Position Available"?

Upvotes: 1

Views: 8138

Answers (2)

Lipu
Lipu

Reputation: 617

First of all I dont have permission to comment. You can use .img-circle class in a div and define css background-color and width and if needed then height as your need.

<div class="img-circle" style="background-color: red; width: 20px; text-align: center;">8</div>

Upvotes: 2

MarioDS
MarioDS

Reputation: 13063

You can either use a .png image with transparant pixels around the coloured circle. It's also possible to use a CSS trick (see also How to make circular background using css?).

As for the alignment, you will need to set the vertical-align CSS property to middle on span.badge (it should work like that, but vertical-align can give unexpected behavior imo)

Upvotes: 1

Related Questions