Hello everyone,
I am trying to make a simple control panel,
The first column should contain a navigation menu, using Bootstrap List-group with Bootstap Colapse.
The second column will be the content.
The issue is that there are padding on left and right 15px, that makes a small space, I used pl-0 to remove that padding, but is that the proper way to do it? because container-fluid should make the “div” takes the fall width 100%, but there still small padding.
This is the code:(You can see the output here: https://www.bootply.com/QWS6mv58kY)
<div class="container-fluid">
<div class="row">
<div class="col-3">
<div class="list-group">
<a href="#target-here" class="list-group-item list-group-item-action" data-toggle="collapse">Hello</a>
<div class="collapse" id="target-here">
<div class="list-group">
<a href="#" class="list-group-item">Another List Here</a>
<a href="#" class="list-group-item">Another List Here</a>
<a href="#" class="list-group-item">Another List Here</a>
</div>
</div>
<a href="#target-here2" class="list-group-item" data-toggle="collapse">Hello</a>
<div class="collapse" id="target-here2">Hello, This is a hidden Division</div>
<a href="#target-here3" class="list-group-item" data-toggle="collapse">Hello</a>
<div class="collapse" id="target-here3">Hello, This is a hidden Division</div>
</div> </div>
<div class="col-9">
<div class="container my-3">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
</div>
</div>
</div>
<div class="container">
<h1>This is how it looks like</h1>
</div>
</div>
</div>
<hr>
</div><div class="container-fluid pl-0">
<div class="row">
<div class="col-3">
<div class="list-group">
<a href="#target-here" class="list-group-item list-group-item-action" data-toggle="collapse">Hello</a>
<div class="collapse" id="target-here">
<div class="list-group">
<a href="#" class="list-group-item">Another List Here</a>
<a href="#" class="list-group-item">Another List Here</a>
<a href="#" class="list-group-item">Another List Here</a>
</div>
</div>
<a href="#target-here2" class="list-group-item" data-toggle="collapse">Hello</a>
<div class="collapse" id="target-here2">Hello, This is a hidden Division</div>
<a href="#target-here3" class="list-group-item" data-toggle="collapse">Hello</a>
<div class="collapse" id="target-here3">Hello, This is a hidden Division</div>
</div> </div>
<div class="col-9">
<div class="container my-3">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
</div>
</div>
</div>
<div class="container">
<h1>Here using the calss pl-0 to remove the padding.</h1>
</div>
</div>
</div>
</div>