Stack the text on top of each other beside an image

Here is some HTML code that I am working with:

    <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>

My question is, is it possible to have text number two positioned below text number 1 but to the right of the image? I am trying to achieve this layout where the second span falls below the image.

htmlcssbootstrap-4

Answer №1

To achieve this layout, you can utilize the power of flexbox. Additionally, Bootstrap provides ready-made classes that can help.

Here's how you can adjust your HTML structure:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="d-flex flex-row justify-content-between">
                <img />
                <div class="d-flex flex-column">
                    <span />
                    <span />
                </div>
            </div>
        </div>
    </div>
</div>

https://i.sstatic.net/l02yv.png

Check out the demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/6/

If you want to center-align both the text list and the image, simply add .align-items-center to the parent flex container:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <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>

https://i.sstatic.net/DAnI3.png

Check out the centered demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/8/

Answer №2

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

javascripthtmlcssangular

Guide on transforming a Java multiclass applet into an HTML file

Can someone help me with converting three Java classes saved as .java into an applet in HTML? I've been advised to convert it to a .jar file, but I'm not sure how to do that. Can anyone provide a step-by-step guide, preferably using NetBeans? ...

javahtmlobjectjarapplet

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

Get both div tags within a single find_all function call in Beautiful Soup

Is there a way to extract multiple HTML div tags using a single "soup.find_all" function in beautifulSoup? The divs are labeled as "event odd" and "event even" on the webpage, and I want to iterate through all of them. Here is an example of the webpage co ...

pythonhtmlbeautifulsoup

Conceal a div element using a button through JavaScript

I've been scouring various online resources for solutions, including Stack Overflow and W3Schools, but I haven't had any luck so far. Here's a simplified version of my current code: <script language="javascript"> function remove() ...

javascripthtmlblockdisplay

What is the best way to update a CSS href using window.open with JavaScript?

I am trying to dynamically change the CSS href by using window.open in JavaScript. <a class="cssButton" id="Launch" target="_blank" data-baseref="Example/index.html?" href="Example/index.html?" >Launch Example</a> I want to transform it into: ...

javascripthtmlcss

KineticJS: Applying a filter to an image does not result in the image having a stroke

Working with KineticJS version 5.1.0 I encountered an issue where a KineticJS image that had a stroke lost the stroke after applying a filter to it. I have created a demo showcasing this problem, which can be viewed on JSFiddle. Here is the code snippet: ...

javascripthtmlkineticjs

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

javascriptjqueryhtmlcss

Styling Challenges with CSS/AngularJS Accordion in Footer

I want to create a page layout as shown below: +---------------------------+ | Auto-fill / v scrollable ^| | || | || | v| +---------------------------+ | Fixed [][][] ...

javascripthtmlcssangularjs

Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is m ...

htmlcssclass

Is it detrimental to my search engine ranking if I utilize CSS display:none?

Imagine having valuable content that is initially hidden with CSS, and then using javascript to reveal it only when the user clicks on certain links. Even users without javascript enabled can access this content by following the links to a new page where i ...

javascriptcssseo

PHP code for uploading multiple images at once

I am currently facing an issue with uploading multiple files at once and not getting the desired result. Below is my code snippet: <?php if (isset($_FILES['uploadfiles'])) { print_r($_FILES); } ?> <form action="index.php" method="po ...

phphtmlimage

Tips on how to generate a list of checkboxes within a View using ASP.NET MVC

Having some trouble with my View and model when it comes to displaying checkbox lists in lines using bootstrap. They are not appearing how I want them to. Need some assistance and have attached a mock-up below to show how they should look. My approach is o ...

c#asp.net-mvcbootstrap-4

How to extract a value from a span input textbox using Vue?

I just started using Vue and I'm attempting to create an auto-growing input. I've realized that it's not possible to create a real <input> element that adjusts its size based on its content and allows for value modifications using v-mo ...

javascripthtmlvue.jsinput

Determine the width of the window and adjust the positioning of jQuery UI tooltips accordingly

Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle] $(function () { $(doc ...

javascriptjquerycssjquery-uitooltip

What are some ways to enhance the specificity of HTML parsing code?

I'm currently facing a challenge where I need to extract hrefs and titles from an HTML page while only focusing on a tags that have both attributes. Some of the a tags do not have a title attribute. How can I modify my code to only display data from t ...

phphtml

creating an animated loop within an Angular template

How can we display a dynamic loop in Angular template using an array of object data? [ { "name": "name", "text": "text", "replies": [{ "name": "Reply1", "t ...

javascripthtmlangular

How can you alternate a button's text using jQuery?

Seeking advice on jQuery and Javascript: Take a look at this HTML snippet: <div class="quandoo-widget" id="quandoo-booking-widget"></div> <script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"& ...

jqueryhtmlcss

How to include padding in HTML elements

Looking for help with aligning this html code equally. <address class="address"> <span>Support E-mail:&nbsp;</span><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

csshtml