Bootstrap: Issue with columns not adding up to 12 and being put on new rows

Question

Right, so I'm pretty sure I'm following the rules to structure columns and rows in bootstrap. You have your container then your rows and columns for a specific row. What im wondring is why it creates a new row for each post that i make and stacks them instead of putting them on the same row till it hits 12.

Here is my code:

<div class="container">
    <section class="row new-post">
        <div class="col-md-6">
            <header><h3>What do you have to say</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="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>

Answer 1

I believe your form-group class is interfering with the thing that you are trying to achieve. Try removing it and check if that does it for you (the formatting would obviously change upon removing that class, but you'll know the source of the issue), otherwise try writing a custom class for form-group.

I hope this helps.