Hello there! I'm new to CSS and bootstrap. I have a button that collapses the navigation sidebar, and I want the content of the page to float to the left when the sidebar is collapsed and shrink when it's expanded.
Can anyone please suggest a solution for this issue?
Here is the sample code I'm working with:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header ">
<button type="button" class="navbar-toggle visible-lg" data-toggle="collapse" data-target="#navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-default navbar-collapse">
<div class="pull-left" id="navbar-ex1-collapse">
<ul class="nav navbar-default navbar-nav side-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-user"></i> My Profile <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ><a class="dropdown-color" href="#" style="background:rgba(59, 89, 152, 0.28);" ><i class="fa fa-user"></i> View Profile</a></li>
<li><a class="dropdown-color" href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-edit"></i> Edit Profile</a></li>
</ul>
</li>
<li><a href="Dashboard.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-desktop"></i> Deployment <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-edit"></i> Deployment Parameter</a></li>
<li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-bar-chart-o"></i> Package Deployment</a></li>
<li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-bar-chart-o"></i> Release Deployment</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Username <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user"></i> View Profile</a></li>
<li><a href="#"><i class="fa fa-gear"></i> Edit Profile</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="auto-adjust" id="page-wrapper">
//table goes here
</div>
And here is the custom CSS class I created to adjust the content:
CSS:
.auto-adjust{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin:0;
float:left;
}