I'm in the process of setting up a two-column layout. The main content column houses the blog card, while the secondary column I'm attempting to position at the top right corner.
Check out this link for the blog card.
This is the Bootstrap layout code snippet I've been using:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url({{ post.featured_image }})"></div>
<ul class="details">
<li class="author"><a href="#">John Doe</a></li>
<li class="date">Aug. 24, 2015</li>
<li class="tags">
<ul>
<li><a href="#">Learn</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</div>
<div class="description">
<h1>{{post.title}}</h1>
<h2>Opening a door to the future</h2>
<p>{{post.summary}}</p>
<p class="read-more">
<a href="{{ url_for('blog.show_post', slug=post.slug) }}">Read More</a>
</p>
</div>
</div>
</div>
{% endfor %}
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
In the desktop view, the content in col-md-4 does not stick to the right, instead, it appears at the bottom of the card. Despite trying various methods, the sidebar remains fixed to the last post rather than appearing at the top right with the first post. I am fetching data from an API and utilizing the blog card to showcase posts from the CMS.