What is the best way to place text alongside a shape?

Question

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape.

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;

}

Currently, the circle is above the <p> tag. I want to include two circles: one that says available and another one in red indicating not available. If you have a better method to achieve this, please do share.

Thank you,

html css twitter-bootstrap-3

Answer 1

Answer №1

When the div element has a default width of 100%, it causes the p tag to wrap to the next line. To modify this behavior, you can apply properties like display:inline-block to the div.

To view examples with two circles, refer to this fiddle.

Answer 2

When the div element has a default width of 100%, it causes the p tag to wrap to the next line. To modify this behavior, you can apply properties like display:inline-block to the div.

To view examples with two circles, refer to this fiddle.

Answer 3

Answer №2

In order to achieve the desired result, you can implement the following code :

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

What this code snippet does is it changes the styling of the span and <p> elements to inline-block, allowing them to align on the same line.

Take a look at the example 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>

Answer 4

In order to achieve the desired result, you can implement the following code :

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

What this code snippet does is it changes the styling of the span and <p> elements to inline-block, allowing them to align on the same line.

Take a look at the example 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>

Answer 5

Answer №3

Instead of using a regular circle, you could opt for an icon. Personally, I am a fan of the font awesome icon set available at :

All you need to do is include the fontawesome CSS files and add the following code snippet to your HTML:

<i class="fa fa-circle">available</i>

Answer 6

Instead of using a regular circle, you could opt for an icon. Personally, I am a fan of the font awesome icon set available at :

All you need to do is include the fontawesome CSS files and add the following code snippet to your HTML:

<i class="fa fa-circle">available</i>

What is the best way to place text alongside a shape?

Answer №1

Answer №2

Answer №3

Similar questions

Are tabs best displayed as an overlay?

Error importing reach-router in Gatsbyjs causing website to break

Position the Bootstrip 4 tooltip to automatically display on the right side

The Django dilemma: Determining the right balance between using templates and letting code generate HTML

Combining verification with Recaptcha (or necessary information)

Uncover each image individually

Adjusting Window Size Causes White Space to Appear Above Div

Adjust the height of a div in JQuery to fit new content after specifying a height previously

Is it feasible to execute exe files within a ReactJS environment?

Tips on containing text within a div box without exceeding its boundaries

Exploring the capabilities of SVG and audio integration in web browsers

Having problems with the functionality of AngularJS Routes

After sending a post request, the form in HTML with Node.js is returning an undefined response

Creating Dynamic Videos with PHP and HTML

I'm interested in utilizing Angular JS $anchorScroll to quickly navigate to the top of a page by using <a href>

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

How come the buttons in the navbar are not aligning to the right with justify-content-end?

Leveraging tailwind for achieving dynamic height responsiveness

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?