How to place the form horizontally (in a row)?

I have a form, I tried to do it myself but did not find how to make the fields in a row (horizontally). I am very grateful because I spent a lot of time and did not find a solution. attached a screenshot

My view business.blade.php

@section ('main_content')
    <table class="table table-dark">
                <th scope="col">Name</th>
                <th scope="col">Mail</th>
                <th scope="col">Website</th>
                <th scope="col">Delete</th>
                @foreach ($business as $singleBusiness)
                    <td>{{ $singleBusiness->name}}</td>
                    <td>{{ $singleBusiness->mail}}</td>
                    <td>{{ $singleBusiness->website}}</td>
                    <td><a href="/delete/{{ $singleBusiness->id }}">
       <button class="btn btn-danger btn-delete">Delete</button></a></td>
    <form method="post" action="/business">
        {{ csrf_field() }}
                <div class="form-row align-items-center">
                    <div class="col-sm-3 my-1">
            <label for="name" class="sr-only"></label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
                        <div class="col-sm-3 my-1">
            <label for="mail" class="sr-only"></label>
            <input type="text" class="form-control" id="mail" name="mail" placeholder="Mail">
                            <div class="col-sm-3 my-1">
            <label for="website" class="sr-only"></label>
            <input type="text" class="form-control" id="website" name="website" placeholder="Website">
        <button type="submit" class="btn btn-outline-warning mb-2">Додати</button>



.container {
    display: flex;        // Distribute horizontally
    flex-wrap: wrap;      // If elements overflow the width of the container, put below
    align-items: center;  // Align items vertically

This will make the container distribute its contents horizontally. The “align-items: center” style is optional, it will align elements vertically.

I see you use tables, I don’t recommend using tables, they are awful for responsiveness. Instead use flex, like this:

.row {
    display: flex;   // Distribute horizontally

.row > .column {
    flex: 1;    // All columns same width
    // or
    flex: 0 0 25%;   // Each column 25%

<div class="row">
    <div class="column">Name</div>
    <div class="column">Mail</div>
    <div class="column">Website</div>
    <div class="column">Delete</div>

<div class="row">
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"></div>

You can also use bootstrap rows and columns, but I explain how to accomplish the same by yourself.

Leave a Reply

Your email address will not be published. Required fields are marked *