How to place an icon in between two bootstrap columns?

Question

I would like to place an icon, centered, in between two bootstrap columns that are both on one row? The columns are each col-6 and that cannot change. I would like this icon to always be between the two columns on mobile and on desktop etc. How can I accomplish this?


    
        
    

    I want an Icon here like:

user_4101210 · Answer

You can call font awesome directly from css by using the unicode. If you give the div an id, you can use ::after to add the icon like so:

#stuff::after {
  font-family: "FontAwesome";
  content: "\f007";
  vertical-align: middle;
}

user_13294930 · Answer

If you don't find a better solution, then I would try using:

display: grid;
grid-template-columns: 45% 5% 45%;

(or however you need the dimensions to be to fill the page up)

And then maybe flex the icon to position it centrally:

display: flex;
justify-content: center;
align-items: center;

Changing up the col-X in Bootstrap would work too, but you said they can't be changed, so... I do hope you make it work though.

user_841591 · Answer

Using CSS you could do something like:


    
        
        
    
    
        
    


.has-icon {
    position: relative;
}
.has-icon i {
    position: absolute;
    top: 50%;
    margin-top: -10px; // half of the icon's height 
    left: -10px; // will need adjusting to preference
}

You will also need to consider re-positioning when the columns collapse on smaller devices, so using media query and placing the icon to the bottom of the first column instead.

How to place an icon in between two bootstrap columns?

3 Answers