how to makeboostrap4 column fit to its content - html

Question

I have below container with two rows. first row is header and second row has left nav bar and main content on right.
i want the left nav bar shrink to the width of the content. It shrinks to just icons when i press a toggle button of nav bar. in its default position it is expanded to show icons plus labels. When user resizes screen to small devices the nav bar should only show icons.
<div class="row h-100">
<div
class="col-12 w-100 sticky-header"
style="background-color: darkgrey;"
>
<h1>This is top header<h1/>
</div>
<div class="col-2">
<div class="fixed-box col-2">
<h1>SideNavBar</h1>
<ul>
<li>
<router-link class="nav-link" to="/contacts">
<img :src="ContactsImage" />
<span>Contacts</span>
</router-link>
</li>
<li>
<router-link class="nav-link" to="/home">
<img :src="HomeImage" />
<span>Home</span>
</router-link>
</li>
<li>
<router-link class="nav-link" to="/help">
<img :src="HelpImage" />
<span>Help</span>
</router-link>
</li>
</ul>
</div>
</div>
<div class="col-10 bg-warning h-100 no-gutters">
<p>This is main content you see when you click a link on left<p/>
</div>
</div>
</div>
</div>
#media only screen and (max-width: 768px) {
.sidenavbar span {
display: none;
}
.sidenav {
width: 75px !important;
}
}
.sidenav {
width: 150px !important;
}
I could achieve the desired functionality by using css style to apply a different width for side nav bar column. But it leaves out col-2 with space not used by side nav. Is there a way to make col-2 to shrink to the size of its content. And make the main content col-10 to take up .

Answer 1

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.