laravel 8 bootstrap tags input  example

in this tutorials, we will see how to implements bootstrap input tags in laravel 8. For this section we will create bootstrap tags input but store value in single row not using laravel relationship. we also use bootstrap 4 , jquery and bootstrap input tags CDN.

Laravel 8 Bootstrap Input Tags Example

Create Laravel Project

Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.

composer create-project --prefer-dist laravel/laravel tags-input

Set Up Database Details in ENV

Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.



Create Post Model

php artisan make:model Post -m 

Add value in migration file


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('posts', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()



namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
    use HasFactory;

    protected $fillable = [
        'title', 'description', 'keywords'

create route web.php


use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

| 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::resource('posts', PostController::class);

Create Post Controller

php artisan make:controller PostController -r



namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
    public function index()
        return view('posts.index');
     * Store a newly created resource in storage.
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
    public function store(Request $request)
        $data = $request->validate([
            'title'       => 'required',
            'description' => 'required',
            'keywords'    =>  'required',
        $data['keywords'] = str_replace('"', '', $request->keywords);
        $Post = Post::create($data);

        return redirect()->route('posts.index')->with('success', 'Posts created successfully.');

Create Post blade file


<!DOCTYPE html>
<html lang="en">

      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Laravel 8 Bootstrap Input Tags Example</title>
      <link rel="stylesheet" href="">
      <script src=""></script>
      <script src=""></script>
      <script src=""></script>
      <!-- Bootstrap Tags Input CDN -->
      <link rel='stylesheet'

   <style type="text/css">
      .bootstrap-tagsinput .tag {
         margin-right: 2px;
         color: white !important;
         background-color: #4137ce;
         padding: .2em .6em .3em;
         font-size: 100%;
         font-weight: 700;
         vertical-align: baseline;
         border-radius: .25em;
   <div class="container">
      <div class="row">
         <form action="{{ route("") }}" method="POST">
            <div class="row">
               <div class="col-md-12">
                  <div class="form-group">
                     <label for="name">Title</label>
                     <input type="text" name="title" class="form-control" placeholder="title"
                        value="{{ old('title') }}">
                     <strong class="text-danger">{{ $errors->first('title') }}</strong>

               <div class="form-group">
                  <label for="name">Description</label>
                  <textarea id="elm1" name="description" class="form-control"
                     placeholder="Description">{{ old('description') }}</textarea>
                  <strong class="text-danger">{{ $errors->first('description') }}</strong>
               <div class="form-group">
                  <label for="name">Keywords</label>
                  <input type="text" name="keywords" class="form-control" value="{{ old('keywords') }}"
                     data-role="tagsinput" />
                  <strong class="text-danger">{{ $errors->first('keywords') }}</strong>
               <button type="submit" class="btn btn-black">Submit</button>

   <!-- Tags Script start-->

   <script src=''></script>

      $(function () {
         $('input').on('change', function (event) {

            var $element = $(;
            var $container = $element.closest('.example');

            if (!$'tagsinput'))

            var val = $element.val();
            if (val === null)
               val = "null";
            var items = $element.tagsinput('items');

            $('code', $('pre.val', $container)).html(($.isArray(val) ? JSON.stringify(val) : "\"" + val.replace('"', '\\"') + "\""));
            $('code', $('pre.items', $container)).html(JSON.stringify($element.tagsinput('items')));