Bootstrap: Problem arises when columns do not total up to 12 and are pushed onto separate rows

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>

Answer №1

It seems that the form-group class may be causing interference with your desired outcome. Consider removing the class to see if it resolves the issue. Alternatively, you could create a custom class specifically for the form-group.

I trust this suggestion will be of assistance to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the ...

Is there a way to dynamically alter the heading color in Shopify liquid code?

After utilizing ChatGPT to review the code, I am uncertain if it is related to the color schemes. I am unsure of what I may be missing or doing incorrectly. While I can successfully alter the heading text, I am unable to change the color. Below is the code ...

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

Looking to access files from the Android asset folder within an HTML document?

I'm currently developing an HTML-based app for Android. I've successfully displayed the HTML file using this code: "file:///android_asset/index.html" Now, my goal is to load local image files or fonts within that HTML file from the assets folder ...

Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

For my e-commerce site selling musical instruments, I'm designing a product landing page that showcases guitars, keyboards, violins, and cellos. As part of the design, I want to include expandable sections with detailed information about each instrume ...

What is the best way to display a success message after saving in Laravel 5.1?

When working with Laravel 5.1, I successfully save data in the database. However, I am now looking to display a success message. How can I achieve this? Below is the code snippet from my Controller's save method: public function store(Request $reques ...

Adjust the width of an anchor tag

I have been experimenting with different solutions and unfortunately, I have not been successful in resolving the issue at hand. While working on a WordPress website, I encountered some challenges. Despite having some knowledge in this area, I am struggli ...

javascript Why isn't the initial click registering?

In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...

Employing a comma-separated list within the concat function within a MySQL query

I need help modifying this query. Currently, it appends the userid in the table continuously but I want them to be separated by commas. Can you please suggest a change in the query? DB::table('table_user_create_activity') ->wh ...

Creating responsive modal windows in Vue and Laravel to dynamically adjust to the screen size

I am currently working with a modal window code snippet. <transition name="modal" @close="showModal = false"> <div class="modal-mask" style=" width: 90% !important;"> <div class="modal-wrapper"> < ...

The method for retrieving and entering a user's phone number into a text field upon their visit

Objective: To enhance the user experience by automatically filling in the phone number input field when a mobile user views the page, making it easier to convert them into leads. A privacy policy will, of course, be in place. This page will offer a promo ...

Execute the JS function during the first instance of window scrolling

Currently, I have implemented a typewriter effect on my website that triggers when the user scrolls to a specific section. However, I want this effect to occur only once. Unfortunately, every time the user scrolls again (in any direction), the function is ...

"Unlocking the Power of CSS: How to Effortlessly Align Text and Images

Dealing with an unchangeable piece of HTML can be frustrating, especially when it comes to styling. In my case, I have the following structure: <a title="some title" href="..."> <img src="....jpg"></img> Some text </a> Here ...

Conceal the div with ID "en" if the value matches $en

Looking for assistance with language settings on my page. I have a menu where I can select English, Croatian, or German. Below is the code to manage language changes: <?php class home_header_language { protected $_DBconn; ...

Issue with confirming deletion of tabulated records

HTML Code: <td>random_data_1</td><td><button id="random_data_1"></button></td> <td>random_data_2</td><td><button id="random_data_2"></button></td> <td>random_data_3</td ...

Using jquery ajax to add new rows to a MySQL table at the bottom, creating a repeating pattern

Using AJAX jQuery, I am constantly updating a table with data from a MySQL database at regular intervals. The refresh rate is set to 1 second. Below is the PHP file responsible for successfully creating the JSON data: <?php $servername = "localhost"; ...

Issue with Bootstrap Carousel Interval Setting not Functioning as Expected

I recently added Twitter Bootstrap-Carousel to a website with the intention of using it to navigate through different sections of a module. However, I'm encountering an issue where setting the interval to false does not work as expected. When I set an ...

How to achieve a Dropbox-inspired footer effect using CSS?

Take a look at dropbox's website here: Have you noticed how the footer with "Learn more" remains fixed at the bottom regardless of window resizing until you click or scroll down? position: absolute; bottom: 50px; left: 0; width: 100%; text-align: ce ...

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

Parsing of CSS and Javascript is disabled within iframes

Within my node.js application, I have configured an endpoint where I can load some parsed HTML code. This is achieved through the following code: app.get('/code', function (req, res) { res.setHeader('Content-Type', 'text/html& ...