Place a button regardless of grid layout bootstrap4
I'm trying to create a sidebar with a floating arrow button that'll collapse the bar (a bit similar to, for example this codepen code).
I'm using bootstrap4, and using container-fluid with a row that's divided by 2-8-2 (2 columns for left sidebar, 8 columns for main content and another 2 columns for right sidebar).
I'm not sure if I need to adjust the row and replace one of the columns to put the floating button in it, or I can somehow break out of the grid layout and put the button between columns 2 and 3 (let's say to be stretched between "columns" 1.5 and 2.5, or 2 and 2.5).
I wasn't able to find a floating button mechanism online that used bootstrap's grid layout, so I'm opening a new question.
For example, put a floating button in the red area in the following picture:
Edit:
To @Imran Rafiq Rather's request, here's the HTML code (as you can see, divided to 3 parts in a single row). I can simplify it if needed, all of the content inside it is of no importance to the question itself.
<!--main row (second row) in the grid layout-->
<div class="container-fluid ml-n3">
<div class="row" name="main-row">
<!--sidebar-left-->
<div class="col-2 position-fixed" style="height: 100vh;" name="sidebar-left">
<ul class="list-group bg-secondary h-100 collapse show" id="sb-left">
<li class="list-group-item bg-secondary border-0">
<a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="explore">#Explore</a>
</li>
<li class="list-group-item bg-secondary border-0">
<a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="bookmarks">Bookmarks</a>
</li>
<li class="list-group-item bg-secondary border-0">
<a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="lists">Lists</a>
</li>
<li class="list-group-item bg-secondary border-0">
<a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="moments">Moments</a>
</li>
<li class="list-group-item bg-secondary border-0">
<a href="#" class="btn btn-secondary btn-lg btn-block text-white-50" role="button" name="settings">Settings</a>
</li>
<li class="list-group-item bg-secondary border-0 d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#post-tweet-id">Tweet</button>
</li>
<li class="list-group-item bg-secondary mt-5">
<div class="mt-5"></div>
<div class="row d-flex">
<div class="col-auto">
<img src="logo.png" class="rounded-circle img-fluid" style="height: 40px" alt="Profile Picture" />
</div>
<div class="col">
<div>user-name</div>
<div class="text-white"><small>@username</small></div>
</div>
</div>
</li>
</ul>
</div>
<!--main-content-->
<div class="col-8 offset-2 container-fluid" name="main-content">
<div class="card mx-3 my-5"> <!--mb-5 mt-3-->
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header"><a href="#" class="link text-decoration-none">@Username</a></div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="modal" data-target="#tweet-id"><span data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></span></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--sidebar-right-->
<div class="col-2 position-fixed offset-10 overflow-auto" style="height: 89vh;" name="sidebar-right">
<ul class="list-group bg-secondary h-100" name="sb-right">
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-secondary text-white-50 mx-auto">
<div><small>name-of-trend</small><div>
<div><h4>#Explore</h4></div>
<div><small>num-of-tweets</small></div>
</button>
<button type="button" href="#" class="list-group-item list-group-item-action bg-info text-white mx-auto">
<div><h6>Show more...</h6></div>
</button>
</ul>
</div>
</div>
</div>
</div>
Inside your sidebar create a button like <button>X</button>. Then use the following CSS.
.sidebar{
position:relative;
}
button{
position:absolute;
top:45%;
right:-1rem;
}
Note: button should be immediate child of aside. This way button comes out of the normal flow and we can place it anywhere within aside.
As a general rule:
Whenever we have a parent with
position:relative. We can useposition:absoluteon its child element and place it anywhere within the parent :) Out of the normal flow of execution !!!