Reading Time: 4 minutes

1,530 Views

Inside this article we will see the concept i.e Laravel 9 How To Add Conditional Class in Blade Template. Article contains the classified information about adding conditional classes inside blade templates of laravel.

Laravel Blade is a simple templating language which make views much easier to read. Blade gives us some simple shorthand syntax for common PHP functions such as @if, @foreach, @isset, and many others. Here, we will see the use of @class and @if directives.

If you are looking for a solution to add your conditional classes inside blade templates then this article will help you a lot for this. Tutorial is super easy to understand and implement it in your code as well.

Learn More –

Let’s get started.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Example #1: Add Conditional Class Using @class Directive

Here,

We will use @class directive of laravel blade template.

Let’s say we have a blade template. If you want to use conditional classes on an element then it will be like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <title>Laravel 9 How To Add Conditional Class in Blade Template</title>
</head>
<body>
    <div class="container">
        @php
            $isActive = false;
        @endphp
         
        <span @class([
            'p-4',
            'bg-pink-900 text-green-200' => $isActive,
            'bg-red-500 text-white' => !$isActive
        ])></span>
    </div>
</body>

</html>

Concept

You can use @class directive of blade template.

<span @class([
    'p-4',
    'bg-pink-900 text-green-200' => $isActive,
    'bg-red-500 text-white' => !$isActive
])>Sample Message</span>

Output

<span class="p-4 bg-red-500 text-white">Sample Message</span>

Example #2: Add Conditional Class Using @if Directive

Here,

We will use @if directive of laravel blade template.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel 9 How To Add Conditional Class in Blade Template</title>
</head>
<body>
    <div class="container">
    	
    	@php
            $isActive = true;
        @endphp

        <span class="p-4 text-gray-500 
            @if ($isActive)
                bg-pink-900 text-green-200
            @else
                bg-red-500 text-white
            @endif
        ">Sample Message</span>
    </div>
</body>

</html>

Concept

You can use @if directive of blade template.

<span class="p-4 text-gray-500 
    @if ($isActive)
        bg-pink-900 text-green-200
    @else
        bg-red-500 text-white
    @endif
">Sample Message</span>

Output

<span class="p-4 text-gray-500 bg-pink-900 text-green-200">Sample Message</span>

We hope this article helped you to learn Laravel 9 How To Add Conditional Class in Blade Template Tutorial in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.