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

Disable automatic playback of HTML video

Verify whether an accordion is in the open or closed position

Fixed Div Columns on the Far Left

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

Creating dynamic web content using KaTeX and Node.js

The link button became unresponsive as soon as I implemented CSS changes

Ensuring the Sticky Table Header Moves Alongside Horizontal Scroll

Switch the CSS class for the currently selected link

What is the best way to apply CSS styles to a child div element in Next.js?

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

Is there a way to determine the names of the functions that are being called?

What is the method for setting tabstops in XHTML?

Get rid of the white border surrounding the object tag

Facing difficulties in retrieving my static files with Express and Node.js

Tips for replacing all occurrences of a specific string in HTML while preserving JavaScript attributes

Convert HTML content to a PDF file with Java

Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Immediate family members nearby are not an option. We will have to create the form dynamically

Creating an XML response to generate an HTML dropdown menu in PHP