Are facing an issue with page content appearing below sidebar?
This is a very common issue you will face during website development.
I was developing a website using Bootstrap where I have to display a sidebar on the left and content on the right. I faced a similar issue.
Here is a simple solution I used to fix this issue. Sharing it with you.
Let’s say you have the below HTML content with the bootstrap tags.
<div class="col-lg-8 col-md-12 order-md-2 order-lg-2 content">
<div class="row">
<div class="col-lg-4 col-md-12 sidebar">sidebar</div>
<div class="col-lg-8 col-md-12 order-md-2 order-lg-2 content">content</div>
</div>
</div>
You don’t need to modify anything in HTML. Just add a few lines of CSS code as mentioned below and it will work like magic.
.container {
position: relative;
}
.blog-details-area .content {
margin-left: 350px;
}
.blog-details-area .sidebar {
position: absolute;
}
You can adjust the left margin of the content as required.
Remember, this solution has nothing to do with the bootstrap. It will work even if you are using Bootstrap or not.
Related: You can also change the order of the bootstrap columns. Suppose you want to show the right sidebar to the left side of the content, you can achieve this with the special bootstrap class tag.
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on <b>CSEstack.org</b> portal.