CODEWITHSUNDEEP
htmlcssbootstrap-4
Nickso
Nickso

Reputation: 805

Place Text on top of one another next to an image

I have the following html:

    <div class="row">
        <div col-md-9>
            <div>
                <img class="img-valign" src="an image">
                <span class="text1" Style="font-size: 8pt">Text number 1</span> 
                <span class="text1" Style="font-size: 8pt">Text number 2</span> 
            </div>

        </div>

        <div col-md-3>

        </div>
    </div>
</div>

Is it possible this way to make text number two below text number 1 but on the right of the image? In this way the second span is going below the image.

Upvotes: 0

Views: 26

Answers (2)

David Liang
David Liang

Reputation: 21476

You can easily achieve that using flexbox. Bootstrap also has built-in classes for that.

Your HTML structure needs to be changed slightly:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <!-- justify-content-between makes img and the text list stay left and right -->
            <div class="d-flex flex-row justify-content-between">
                <img />
                <!-- flex-column makes this text list display its children as column -->
                <div class="d-flex flex-column">
                    <span />
                    <span />
                </div>
            </div>
        </div>
    </div>
</div>

enter image description here

demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/6/

If you want to align the text list and the image to their center as well, just add .align-items-center to the parent flex container:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <!-- this div is the parent flex container -->
            <div class="d-flex flex-row justify-content-between align-items-center">
                <img />
                <div class="d-flex flex-column">
                    <span />
                    <span />
                </div>
            </div>
        </div>
    </div>
</div>

enter image description here

demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/8/

Upvotes: 1

aaron lilly
aaron lilly

Reputation: 274

#rightText {
margin-left: 50%;
font-size: 8pt;
}
<div class="row">
        <div col-md-9>
            <div>
                <img class="img-valign" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
                
                <div id ="rightText">
                <span class="text1" Style="font-size: 8pt">Text number 1</span> 
                <br>
                <span class="text1" Style="font-size: 8pt">Text number 2</span> 
          
                </div>
            </div>

        </div>

        <div col-md-3>

        </div>
    </div>
</div>

Upvotes: 0

Related Questions