showing the words directly beside the symbol

Question

showing the words directly beside the symbol

I am attempting to show the text alongside the icon:

Here is the icon:

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

When I position the text next to the icon, the first line that reads "testing: is simple dummy...." ends up in the middle of the icon, while the following line saying "an unknown printer...." appears below the icon. I desire for the second line to be positioned underneath the first line. Please refer to the image below:

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

This is how my code appears:

<div class="row" style="display:flex;">
            <div class="col">
                <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
            <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
            </div>
        </div>

I also attempted to write the code like this:

<div class="row" style="display:flex;">
    <div class="col-auto">
        <img src="https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />

    </div>
    <div class="col-auto">
        <span style="font-size:20px;font-weight:bold">Test test1:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
</div>

The above code did not yield the desired result. With this code, the entire text appeared underneath the image.

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

I wish for the text to appear right next to the image rather than below it.

html css bootstrap-4 flexbox

Answer 1

Answer №1

Whether the entirety of the text should align with the image or if the text should float depends on the desired layout.

Version 1: Float:

img {
  float: left;
  margin: 0 10px 2px 0;
}

<div class="row" style="display:flex;">
  <div class="col">
    <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
  </div>
</div>

Version 2: Separate blocks (using display: contents on the span to include it as part of the second flex child):

.col.x>img {
  margin: 0 10px 0 0;
}

.col.x {
  display: flex;
}

.col.x>span {
  display: contents;
}

<div class="row" style="display:flex;">
  <div class="col x">
    <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
  </div>
</div>

I would suggest adjusting the HTML structure to eliminate the need for display: contents on the span. Instead, create a shared container for the entire text that will act as the second flex child:

.col.x>img {
  margin: 0 10px 0 0;
}

.col.x {
  display: flex;
}

<div class="row" style="display:flex;">
  <div class="col x">
    <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    <div>
      <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
  </div>
</div>

Answer 2

Whether the entirety of the text should align with the image or if the text should float depends on the desired layout.

Version 1: Float:

img {
  float: left;
  margin: 0 10px 2px 0;
}

<div class="row" style="display:flex;">
  <div class="col">
    <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
  </div>
</div>

Version 2: Separate blocks (using display: contents on the span to include it as part of the second flex child):

.col.x>img {
  margin: 0 10px 0 0;
}

.col.x {
  display: flex;
}

.col.x>span {
  display: contents;
}

<div class="row" style="display:flex;">
  <div class="col x">
    <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
  </div>
</div>

I would suggest adjusting the HTML structure to eliminate the need for display: contents on the span. Instead, create a shared container for the entire text that will act as the second flex child:

.col.x>img {
  margin: 0 10px 0 0;
}

.col.x {
  display: flex;
}

<div class="row" style="display:flex;">
  <div class="col x">
    <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    <div>
      <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
  </div>
</div>

showing the words directly beside the symbol

Answer №1

Similar questions

ACF repeater - implement unique data for the final row in each repeater setting

Make the jQuery toggle() function work like a regular radio button when selecting multiple options at a time

The functionality of a nestable tree is unable to properly function within a modal user interface created with the < script> < / script> of Bootstrap

Modify/Change the Class Name of a Link using jQuery within a Navigation List Item Header 4 in a Navigation Menu

Detecting collisions with spheres using Three.js Raycaster

Challenges with navbars and Bootstrap

Tips for effectively passing a parameter in @url.Action

The grid is evenly populated with icons

Ways to verify if the length of a string is zero in Angular JS

Label the Kendo Switch device

Implementing a Popover Notification When Clicked

Creating a social media icon effect similar to Squarespace: A step-by-step guide

I am having trouble aligning my div perfectly and ensuring its responsiveness

Mapping a single value to multiple IDs

Functionality of selecting dates using a datepicker

Storing multiple HTML elements in a variable with React allows for easy manipulation and

When my screen measures 1700px wide, a width of 100% in CSS appears significantly narrower than a width of 500px

Why won't divs align vertically in the center?

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

Parallax scrolling and Swiper slider, a match made in digital design