CODEWITHSUNDEEP
html
digi_life
digi_life

Reputation: 109

How do I place text under an image?

I am trying to create a percentage circle image with text underneath. I am not sure where to place the text so that it goes underneath. Right now it goes to the right side of the image. Thanks! 

            <div class="col-sm-3 wow fadeInDown text-center">
                <div class="c100 p39 medium orange">
                    <span>39%</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>
            </div>
            <p class="lead"> example placeholder text </p>

Upvotes: 0

Views: 1092

Answers (4)

digi_life
digi_life

Reputation: 109

This worked:

CSS:

.col-sm-3 { display: flex; flex-wrap: wrap; }

Upvotes: 0

user7976244
user7976244

Reputation:

I tried to run your code but the output is:

39%

example placeholder text

i didn't get what you said... but if you want to put your text underneath your image
executing/coding the image first will do, if not
then use CSS instead. :D

 <img src="">
 <p>Example placeholder text</p>

Upvotes: 1

Naomi
Naomi

Reputation: 1298

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3 wow fadeInDown text-center">
                <div class="c100 p39 medium orange">
                    <span>39%</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>
                 <p class="lead"> example placeholder text </p>
            </div>

The reason for why it does that is because you are using bootstrap and putting the text outside the col-sm-3 div which will tell the code to put the next part in the overflowing columns. If you put it inside it will end up under it. See snippet.

Upvotes: 0

Lo&#239;c Monard
Lo&#239;c Monard

Reputation: 690

You can simply put a p tag that automatically breaks like that :

<img id="myImage" src="...">
<p>My percentage</p>

Upvotes: 3

Related Questions