How to add text next to a shape?

Question

I am trying to add text next to the circle.

HTML

<div class="row">
   <div class="col-sm-2">
      <span><div class="circle"></div></span><p>available</p>

   </div>

 </div>

CSS

.circle {
width:10px;
height:10px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
background: green;

}

Right now, the circle is on top <p> tag. I am trying to add two circle: available and a red one saying not available. Also, if you know a better way to do this, please let me know.

Thanks,

Answer 1

The div takes up 100% of the width by default, which is why your p tag wraps to the next line. You can set e.g. display:inline-block on the div to change this behaviour.

See this fiddle for your two circles.

Answer 2

Just add the following code :

.col-sm-2 > span, .col-sm-2 > p {
  display: inline-block;
}

What this does is it causes the two elements span and paragraph <p> tags to become inline-block and hence align on the same line.

See this below :

.circle {
    width:10px;
    height:10px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    background: green;
}

.col-sm-2 > span, .col-sm-2 > p {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-2"> <span><div class="circle"></div></span>
        <p>available</p>
    </div>
</div>