Skip to content

All topics  /  Laravel

Laravel Bootstrap Tabs with Dynamic Content Loading Example

Laravel ·

When “Laravel Bootstrap Tabs with Dynamic Content Loading Example” moves through design, development and browser testing, more details are available here can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

Hello Friends,

I will explain step-by-step tutorials on laravel bootstrap tabs with dynamic content loading examples. In this article, we will implement a laravel bootstrap tabs example tutorial. In this article, we will implement dynamic bootstrap tabs in laravel. you will learn how to create dynamic tabs with bootstrap in laravel. Let's get started with creating dynamic tabs by using bootstrap in laravel.

You can use this example with the versions of laravel 6, laravel 7, laravel 8, and laravel 9.

You have just to follow the below step and you will get the layout as below:

Step 1: Install Laravel


This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Migration for this dynamic bootstrap tabs example in the laravel tutorial we have to create our category model and product. so run the below command.

php artisan make:model Category -m
php artisan make:model Product -m

In this step I will use the Category model and Product model to create dynamic bootstrap tabs. So paste this below code to your categories and products table.

database/migrations/create_categories_table.php 

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }
};

database/migrations/create_products_table.php 

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->foreignId('category_id');
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
};

Then run created new migration with below command:

php artisan migrate

After creating the "categories" and "products table you should set up the Category model and Product model as below app/Models/Category.php 

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
    use HasFactory;
    public function products()
    {
        return $this->hasMany(Product::class);
    }
}

app/Models/Product.php 

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
    use HasFactory;
    public function products()
    {
        return $this->belongsTo(Category::class);
    }
}

Step 3: Define Route

Now, we need to define the routes inside the web.php file.

web.php 

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TestController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::namespace('App\Http\Controllers')->middleware('guest')->group(function () {

   
    Route::get('/form',[TestController::class,'index'])->name('index');   
});

Step 4: Create Controller now we need a controller. so create TestController for laravel dynamic tabs. now open the test controller and paste this below code

php artisan make:controller TestController

app/Http/Controllers/TestController.php 

<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
class TestController extends Controller
{
    public function index(Request $request)
    {   
        $category = Category::with('products')->get();
        $catTab = isset($request->id) ? $request->id : $category->first()->id;
        return view()->exists('welcome') ? view('welcome',compact('category','catTab')) : '';
    }
}

Step 5: Create View File

Now everything is ok. we have to just create our view file. so create a view inside the following directory

resources/views/welcome.blade.php 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Bootstrap Tabs with Dynamic Content Loading Example - NiceSnippets.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style type="text/css">
        .product{
            margin: 55px;
            text-align: center;
            font-size: 20px;
            padding: 15px;
            border-radius: 10px;
            color: #fff;
            background-color: #008B8B;
        }
        .category{
            display: flex;
        }
        body{
            background-color: #d2d2d2;
        }
        .categorys{
            background-color: #fff;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="container mt-5 justify-content-center">
        <div class="row">
            <div class="col-md-12 categorys">
                <div class="row">
                    <div class="mt-5 ms-3">
                        <div class="row">
                            <div class="col-md-8 mb-3 ">
                                <h4>Laravel Bootstrap Tabs with Dynamic Content Loading Example</h4>
                            </div> 
                            <div class="col-md-3 mb-3 text-end">
                                <strong class="col-md-5 p-0 m-0 text-end"  style="color: #008B8B">NiceSnippets.com</strong>
                            </div>
                        </div>
                    </div>
                    <ul class="nav nav-tabs">
                        @foreach ($category as $item)
                            <li class=" nav-item">
                                <a href="{{ route('index',['id' => $item->id]) }}" class="nav-link {{ $catTab == $item->id ? 'active' : '' }}">{{ $item->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content">
                        @foreach ($category as $item)
                            <div class="tab-pane {{ $catTab == $item->id ? 'active' : '' }}" id="home{{ $item->id }}" class="active">
                                <ul class="list-unstyled category">
                                    @foreach ($item->products as $element)
                                            <li class="product">{{ $element->name}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Step 4: Start Development Server

Start the development server. Use the PHP artisan serve command and start your server:

php artisan serve

Now you are ready to run our example so run the below command to quick run.

http://localhost:8000/form

More on this topic