CODEWITHSUNDEEP
htmlcssbootstrap-4
Paolo
Paolo

Reputation: 2249

Is there a simple way to prevent text from wraping around an icon in a bullet point list?

Let's say I have a bunch of rows with different icons on each row. Each icon is huge.

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

Now, as long as the text is short enough to not split into two rows, everything is fine and dandy. But if I make the browser window smaller, and the row splits into two, the bottom row will be far apart from the upper row, and it will end up under the large icon.

Is there a simply way to prevent it from doing this?

Upvotes: 0

Views: 75

Answers (1)

Stanimir Angelov
Stanimir Angelov

Reputation: 26

Maybe get rid of the list items and use a paragraph instead. Once the icons are inside each paragraph, you can add style and float the icon left. If you need more info, have a look at this link https://www.w3schools.com/css/css_float.asp

I hope this helps, good luck!

<p>
  <i
    class="bi bi-patch-check-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Some text about whatever. And if you try add some longer text here, it should be all displayed on the side of the icon and then underneath
</p>

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

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

Upvotes: 1

Related Questions