style your form in laravel using bootstrap

Hi Team

I need to style my form to have container has div card somehow its not displaying. But the style is right. How can i make this to be good UI?

@extends('layouts.app')

@section('content')
    
        
            
                
                    {{ __('Register') }}

                    
                        
                            @csrf

                            
                                {{ __('Name') }}
                                

                                @error('name')
                                    
                                        {{ $message }}
                                    
                                @enderror
                            

                            
                                {{ __('E-Mail Address') }}
                                

                                @error('email')
                                    
                                        {{ $message }}
                                    
                                @enderror
                            

                            
                                {{ __('Password') }}
                                

                                @error('password')
                                    
                                        {{ $message }}
                                    
                                @enderror
                            

                            
                                {{ __('Confirm Password') }}
                                
                            

                            
                                
                            
                        
                    
                
            
        
    
@endsection

//publix/css/custom.css

/* Custom styles for registration page */
.register-card {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #ddd;
}

/* Custom styles for login page */
.login-card {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #ddd;
}

//app_blade.php

To ensure that your form is displayed properly with the desired UI style, you can follow these steps:

Make sure that your CSS file (custom.css) is located in the correct directory and that the path specified in the asset() function is correct. Verify that the CSS file is being loaded by inspecting the page source code or using browser developer tools.
Check if you have included the Bootstrap CSS framework in your application. The classes used in your form (e.g., card, card-header, card-body, form-control, etc.) are part of Bootstrap. If you haven't included Bootstrap, you need to add it to your project. You can use a CDN or download the Bootstrap CSS file and include it in your HTML file.
Ensure that the CSS classes defined in your custom.css file are targeting the correct elements in your HTML. In the provided code, you have defined .register-card and .login-card, but those classes are not used in your HTML. Instead, you have used the Bootstrap classes directly (card, card-header, card-body, etc.). If you want to apply custom styles to the card container, you can add the register-card class to the parent div element of the form, like this:

Once you have made the necessary changes, make sure to clear your browser cache and reload the page to ensure that the updated CSS styles are applied.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Deepak Rawat3y ago
To ensure that your form is displayed properly with the desired UI style, you can follow these steps:
1. Make sure that your CSS file (custom.css) is located in the correct directory and that the path specified in the asset() function is correct. Verify that the CSS file is being loaded by inspecting the page source code or using browser developer tools.
2. Check if you have included the Bootstrap CSS framework in your application. The classes used in your form (e.g., card, card-header, card-body, form-control, etc.) are part of Bootstrap. If you haven't included Bootstrap, you need to add it to your project. You can use a CDN or download the Bootstrap CSS file and include it in your HTML file.
3. Ensure that the CSS classes defined in your custom.css file are targeting the correct elements in your HTML. In the provided code, you have defined .register-card and .login-card, but those classes are not used in your HTML. Instead, you have used the Bootstrap classes directly (card, card-header, card-body, etc.). If you want to apply custom styles to the card container, you can add the register-card class to the parent div element of the form, like this:
```
    
        
            
        
    
```
Once you have made the necessary changes, make sure to clear your browser cache and reload the page to ensure that the updated CSS styles are applied.