skip to Main Content

the login form in the home blade remains anchored to the left, and I need to have it in the center of the page, can you help me? the entire complete view is located in the repository

I tried with grid and styles but failed, this is a views for phpvms7

thanks for those who reply

this is the code and view repository :

@extends('app')
@section('title', __('home.welcome.title'))
@section('content')
  <div class="form">
    <h1>@lang('common.login')</h1>
    @if(Auth::check())
    {{-- Itera sugli utenti solo se l'utente è autenticato --}}
    @foreach($users as $user)
    <!-- Codice per visualizzare gli utenti autenticati -->
    @endforeach
    @else
    <div class="card">
      <div class="card-body">
        <form method="POST" action="{{ route('login') }}">
           <div class="form-group" style="max-width: 100%;">>
            <label for="email">@lang('common.email')</label>
            <input type="email" name="email" id="email" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="password">@lang('Password')</label>
            <input type="password" name="password" id="password" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
        </form>
      </div>
    </div>
    @endif
  </div>
</div>
@endsection

page

2

Answers


  1. Try using Bootstrap’s utility classes

    So add this to the head of your master blade layout

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    

    and your code should look something like this :

    @extends('app')
    @section('title', __('home.welcome.title'))
    @section('content')
      <div class="form d-flex justify-content-center align-items-center" style="height: 100vh;">
        <div class="card">
          <div class="card-body">
            <h1 class="text-center">@lang('common.login')</h1>
            @if(Auth::check())
              {{-- Itera sugli utenti solo se l'utente è autenticato --}}
              @foreach($users as $user)
                <!-- Codice per visualizzare gli utenti autenticati -->
              @endforeach
            @else
              <form method="POST" action="{{ route('login') }}">
                <div class="form-group">
                  <label for="email">@lang('common.email')</label>
                  <input type="email" name="email" id="email" class="form-control" required>
                </div>
                <div class="form-group">
                  <label for="password">@lang('Password')</label>
                  <input type="password" name="password" id="password" class="form-control" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
              </form>
            @endif
          </div>
        </div>
      </div>
    @endsection
    
    Login or Signup to reply.
  2. You can use flexbox to center everything. Just wrap the form in a container:

    Add this css to your stylsheet:

    .form-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* Optional: Set a minimum height for centering vertically */
    }
    
    /* Add any additional styling for your form as needed */
    .form {
      /* Your existing form styles */
    }
    

    Here is the modified blade template code with the flexbox wrapper:

    @extends('app')
    @section('title', __('home.welcome.title'))
    @section('content')
    <div class="form-wrapper">
      <div class="form">
        <h1>@lang('common.login')</h1>
        @if(Auth::check())
        {{-- Itera sugli utenti solo se l'utente è autenticato --}}
        @foreach($users as $user)
        <!-- Codice per visualizzare gli utenti autenticati -->
        @endforeach
        @else
        <div class="card">
          <div class="card-body">
            <form method="POST" action="{{ route('login') }}">
               <div class="form-group" style="max-width: 100%;">>
                <label for="email">@lang('common.email')</label>
                <input type="email" name="email" id="email" class="form-control" required>
              </div>
              <div class="form-group">
                <label for="password">@lang('Password')</label>
                <input type="password" name="password" id="password" class="form-control" required>
              </div>
              <button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
            </form>
          </div>
        </div>
        @endif
      </div>
    </div>
    </div>
    @endsection
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search