How come Bootstrap is displaying my icon on a separate line from the text?

I'm facing a layout issue with my Bootstrap grid. When I try to add an icon to a column, it ends up appearing below the text instead of beside it. Can anyone help me identify what's causing this problem?

So far, I've attempted using spans, inline CSS, and vertical-align in my CSS. I even tried adjusting the column width and offset for the adjacent columns.

Here is how the icon currently appears relative to the text

<div class="container border bg-light">
    <div class="container pt-2">
        <div class="row">
            <div class="col-1"><img src="profile.jpg" class="rounded-circle post-img "></div>
            <div class="col-2 col-md-1 col-sm-2 offset-sm-0 offset-1 ml-3 mt-2"><span class="font-weight-bold">Luke_KS
                </span><i class="verify fa fa-check-circle"></i></div>

            <div class="col-2 col-md-1 col-sm-2 mt-2 offset-1 offset-sm-0">
                <p class="font-weight-ligh ml-2">21.12.2020</p>
            </div>
        </div>
        <div class="row ">
            <div class="col-11 offset-1 mt-n1">
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-9 offset-sm-1 offset-0 ml-sm-2">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </div>
        </div>
    </div>
htmlcssbootstrap-4flexboxfont-awesome

Answer №1

The icon will wrap to a new line if there is not enough space in the column.

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

To fix this issue, you can try changing the classes col-2, col-md-1, and col-sm-2 to classes with wider widths.

Alternatively, you can add CSS positioning for the icon:

position: absolute;
top: 4px;
left: -2px;

Answer №2

Take a Look at this Example

 <div class="content wrapper bg-light border">
            <div class="content wrapper pt-2">
                <div class="line">
                    <div class="col-1"><img src="profile.jpg" class="circular-image post-img"/></div>
                    <div class="info col-2 offset-sm-0 offset-1 mt-2"><span class="font-bold">Luke_KS
                     <i class="verified fa fa-check-circle ml-2"></i> </span></div>

                    <div class="col info col-2 col-md-1 col-sm-2 mt-2 offset-1 offset-sm-0">
                        <p class="font-light-weight ml-2">21-12-2020</p>
                    </div>
                </div>
                <div class="line ">
                    <div class="col-11 offset-1 mt-n1">
                        <hr />
                    </div>
                </div>
                <div class="line">
                    <div class="col-9 offset-sm-1 offset-0 ml-sm-2">
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    </div>
                </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

How can I make a recently added row clickable in an HTML table?

I have a table where each row is given the class ".clickablerow". I've set up an onclick function so that when a row is clicked, a dialog box appears allowing me to insert text above or below as a new row. The issue I'm facing is that even though ...

javascriptjqueryhtml

Switch Out DIV Tag After Clicking It Three Times

I am attempting to replace a specific div element with a different one after it has been clicked on 3 times. This is the sole task I am aiming to achieve through the code. I have searched for code snippets that accomplish this, but all of them immediately ...

javascriptjqueryhtmlreplaceelement

Move the text to the following line if a horizontal scroll bar is visible using JavaScript/JQuery and CSS styling

I have a section with multiple div elements...how can I ensure that when there is horizontal scrolling in the section, the hidden divs shift to the next line? HTML <section id="a"> <div class="num"> <div class="num"> <div class="num" ...

javascriptjqueryhtmlcss

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goa ...

javascriptjqueryhtmlcss

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

javascripthtmlangularjsjson

Steps to Hide Pop-Up Cookie Module in HTML with Bootstrap 5

Could someone please assist me in figuring out how to close the popup module in bootstrap when the user accepts or cancels? I can't seem to remember how to do it. <div class="cookie-consent"> <span>This site uses cookies to enhan ...

htmlbootstrap-5

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

Connect various inputs in Vue.js so they can be updated simultaneously

I need to have multiple text inputs that are interconnected, so when I change the value of one input, the others should update with the same value. These inputs are being generated dynamically in a loop using v-for as shown below: <tbody> <varia ...

javascripthtmlvue.js

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

htmlcssalignment

What are the ways to convert canvas animations into gif or webm formats?

I've written a function to capture each frame for the GIF, but I'm experiencing laggy output and crashes as the data increases. Any recommendations? function generateGifFromImages(imageList, frameRate, fileName, scaling) { gifshot.createGIF({ ...

javascripthtmlcanvasthree.jsgif

adding a new transformation to the current properties

Is it possible to add a new transform property to existing ones? For instance, let's say I have a div.animation with the following style: .animation { transform: translateX(-50%) translateY(-50%); } Now I want to include transform: scale(1) to ...

htmlcss

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

Troubleshooting: Bootstrap 5.0 Navbar Dropdown Issue Unresolved

My navbar dropdown isn't working when clicked. I've searched for solutions without success. Is there a script missing? layout.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

htmldjangobootstrap-5

Concealed text hidden beneath a Sticky Navigation Bar (HTML/CSS)

I'm in the process of creating a simple website that includes a sticky Navigation Bar. However, I'm encountering an issue where text added to the website is being hidden behind the Navbar. Is there a way for me to adjust the positioning of the te ...

htmlcss

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

javascriptphphtmlmysqlajax

Tips for styling a button upon being clicked

Is there a CSS technique to make a button change color when clicked with the mouse? I am aware of using ':hover' for changing color, but I need something specific to a left mouse click. I want the same functionality as a standard button but with ...

javascriptjqueryhtmlcss

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

htmlcssbootstrap-4grid-layout

Execute Javascript after modification of the DOM

I have developed two custom directives known as app-content and app-content-item. These directives are intended to be utilized in upcoming projects to provide a basic structure with simple styling. They will be incorporated into a module and should be nest ...

javascripthtmlangularjs

Collapsed Bootstrap 5 select drop-down featuring the multiple attribute

I am facing a challenge with using the select element along with the 'multiple' attribute. My aim is to have it collapsed by default and expand only when the user clicks on it. Unfortunately, Bootstrap 5 no longer supports the multiselect feature ...

jquerycssbootstrap-5bootstrap-selectbootstrap-selectpicker