So, I've been working with Bootstrap to structure columns and rows. It seems like I have the container, rows, and columns set up correctly for each post. However, I am puzzled as to why a new row is created for every post I make, causing them to stack instead of aligning on the same row until it reaches a total width of 12.
Below is the code I am using:
<div class="container">
<section class="row new-post">
<div class="col-md-6">
<header><h3>Share your thoughts</h3></header>
<form action="{{ route('postcreate') }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="cover_image">Image (only .jpg)</label>
<input type="file" name="cover_image" class="form-control" id="cover_image">
</div>
<div class="form-group">
<textarea class="form-control" name="body" rows="5" placeholder="Write your post"></textarea>
</div>
<button type="submit" class="btn btn-primary">Create post</button>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</form>
</div>
</section>
<section class="row posts">
<div class="col-md-2">
@foreach($posts as $post)
@if(Auth::user() == $post->user)
<article class="post">
<!-- <img style="width:300; height:250px;" src="{{ asset('storage/cover_images/' . $post->cover_image) }}"> -->
<p>{{ $post->body }}</p>
<div class="info">Posted by {{ $post->user->first_name }} {{ $post->user->last_name }} on {{ $post->created_at }}</div>
<a href="#" >Like</a>|
<a href="{{ route('postedit', ['post_id' => $post->id])}}">Edit</a>|
<a href="{{ route('post.delete', ['post_id' => $post->id]) }}" class="post-item">Delete</a>
</article>
<br/>
@endif
@endforeach
</div>
</section>
</div>