What is the easiest method to stop text from wrapping around an icon within a bulleted list?

Imagine having rows filled with various icons, each one being quite large.

<li><i class="bi bi-patch-check-fill icon-green" style="font-size:40px;"></I>Some text about whatever</li>

<li><i class="bi bi-bar-chart-fill icon-green" style="font-size:40px;"></I>Some other stuff</li>

<li><i class="bi bi-palette-fill icon-green" style="font-size:40px;"></I>Tons of more stuff I want to talk about</li>

When the browser window is large enough, the rows look great. But when it's resized and a row breaks into two, the bottom row is positioned below the oversized icon.

Is there a simple solution to prevent this layout issue?

htmlcssbootstrap-4

Answer №1

Consider replacing the list items with paragraphs and placing the icons inside each paragraph. This will allow you to apply styles and float the icons to the left. For more information, you can refer to the following link: https://www.w3schools.com/css/css_float.asp

I trust this advice will be helpful. Best of luck!

<p>
  <i
    class="bi bi-patch-check-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Lorem ipsum dolor sit amet. Add some longer text here to see how it aligns next to the icon and then moves below.
</p>

<p>
  <i
    class="bi bi-bar-chart-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Some other content
</p>

<p>
  <i
    class="bi bi-palette-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Plenty more information to discuss
</p>

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

Using Jquery to run a jquery script stored in a variable within jQuery syntax

This question may seem a bit confusing, so allow me to explain further. I am trying to execute a jquery script that is written in a text file obtained through an ajax request. For example, the code I receive from the ajax request looks like this: ($($(" ...

javascriptjqueryhtmlajax

Parallel with one <div> and subsequently another <div>

I have been challenged by HTML and CSS to embrace humility: Attempting to replicate the following design: Here is my effort: <div> <div style="width:800px;"> <div style="float:left;width:25%;background-color:red;">Facility #: COM ...

htmlcsscss-float

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

javascripthtmldomsafaritypescript

Background not covering full height despite setting HTML and body heights to 100%

I've been struggling to set my wrapper to 100% height, despite setting the height to 100%. Any solutions? At the moment, my main_wrapper is empty and should have a background color of red. While I'm looking to add a footer using position: fixed ...

htmlcssheight

Dividing a string into an array and displaying it in a table using Laravel

Retrieving a string from the database and using the explode function to split the values. Below is the code snippet: $data = DoctorRegistration::select('products') ->where('doctorid','=',$doctorid) ->get(); ...

javascripthtmlajaxlaravel

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

javascriptjqueryhtmlcssfrontend

Animating an element from its center with pure CSS

I've dedicated countless hours to uncovering a solution that can be achieved using only CSS. My goal is to create an animation on a div element where its height and width decrease uniformly when hovered over. <div class="a"></div> Above ...

htmlcss

The div background image in Vue.js is displaying a 404 not found error

I've encountered an issue while trying to set a background for a div. Strangely, when using the same relative path with an img tag everything works fine, but as soon as I try to achieve the same result with a div, I receive a 404 error. This img tag ...

htmlcssvue.js

Error Starting Bootstrap 4 with NPM

I am currently in the process of learning how to automate various tasks related to web development using npm scripts. Displayed below is the contents of my package.json file: { "name": "confusion", "version": "1.0.0", "description": "This particula ...

npmbootstrap-4npm-scripts

The timer is malfunctioning

I am new to JavaScript and looking to create a simple countdown. I came across this script: http://codepen.io/scottobrien/pen/Fvawk However, when I try to customize it with my own settings, nothing seems to happen. Thank you for any assistance! Below is ...

javascriptjqueryhtmlcountdown

Utilizing AngularJS to bind data with labels and passing it in a form

I'm having trouble binding input data with label tags and using the same ng-model in a post method. Only one thing works at a time, and when I try to pass the label in the post method, it doesn't work. This issue is causing me difficulty in delet ...

jqueryhtmlangularjsangularjs-material

Issue found (in promise): Invalid Syntax detected at script.js line 8, character 42

I am in the process of developing a tool that retrieves ROBLOX asset IDs using this particular API. I am utilizing the product info function through an API GET request. Despite being near completion, I keep encountering the error Uncaught (in promise) Synt ...

javascripthtmlcssroblox

Avoid relying on automated CSS generation

In my _layout.scss file, I have the SCSS code snippet below: .wrap { display: flex; flex-wrap: wrap; } After compilation, the above SCSS is automatically transformed to the following CSS. However, I want to exclude the (display: -webkit-box;) pro ...

csssass

Interactive tool for crafting dynamic web experiences

I am in the process of developing a straightforward hosting website for my projects. However, I have noticed that many software options feature a split view for editing code and previewing changes, such as Dreamweaver. I am on the lookout for a live edito ...

htmllive

Buffering ceases on the video

I am experiencing an issue with 4 videos and a preloader, which should hide once all the videos are fully buffered. <div id="preload"> <h1> Download... </h1> </div> <video preload="auto" class= ...

javascripthtmlhtml5-videobuffering

What is the reason behind the lack of collapsing in an inline-block container that only contains floated items?

Within this design, there are 3 boxes arranged in a row using the float: left; property for each one. These boxes are contained within 2 other elements. Typically, these containers collapse due to the content being comprised of floated items. However, chan ...

csscss-float

Creating tiles that can be easily stacked to the side

Seeking a solution to a unique layout challenge, I am hoping for some guidance. After searching and not finding exactly what I need, I turned to this platform for help. I want to create a view where multiple boxes (divs) are contained within the same paren ...

htmlcss

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

htmlcssmergeshadow

Optimizing the position of the datepicker dropdown in Boostrap 4

I am currently utilizing Bootstrap 4 (final) with the boostrap-datepicker-plugin 1.7.1. Since Bootstrap 4 no longer uses .input-group-addon elements for the calendar icon, but instead .input-group-prepend and .input-group-append, I made some modificatio ...

jquerycsstwitter-bootstrapdatepickerbootstrap-4

Utilizing Isotope JS on your Wordpress website

I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page: To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp The script ...

javascriptjquerycsswordpress