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

@extends('layouts.layout')
@section('title')Бізнес@endsection
@section ('main_content')
    <h1>Бизнес</h1>
    <p>
    <table class="table table-dark">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Mail</th>
                <th scope="col">Website</th>
                <th scope="col">Delete</th>
              </tr>
            </thead>
            <tbody>
                @foreach ($business as $singleBusiness)
                <tr>
                    <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>
              </tr>
              @endforeach
            </tbody>
        </table>
    </p>
    <form method="post" action="/business">
        {{ csrf_field() }}
        <fieldset>
                <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>
                        <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>
                            <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">
        </div>
        <button type="submit" class="btn btn-outline-warning mb-2">Додати</button>
                </div>
        </fieldset>
    </form>
@endsection

Answer

CSS:

.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:

<style>
.row {
    display: flex;   // Distribute horizontally
}

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

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

<div class="row">
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"><input></div>
    <div class="column"></div>
</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 *