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