[Vuejs]-How to makeboostrap4 column fit to its content

In bootstrap 4 you can add responsive classes such as d-none, d-md-none etc.
https://getbootstrap.com/docs/4.0/utilities/display/

This will hide the <span></span>, containing the text, on mobile devices.

Here’s a codeply example https://www.codeply.com/p/taMk8vmbJl

On mobile it will hide the <span> element and only display icons.

Also by changing col-10 to col-md-10 it’ll display content under ‘SideNavBar’ on mobile.