Yo man Yo man - 1 year ago 52
PHP Question

Merging laravel's Form class with Bootstraps form-group class

I have a form in laravel to edit a post using bootstrap:

<form method="PUT" action="{{ URL::route('post.update', array($post->id)) }}">
<div class="form-group">
<label for="usr">Title:</label>
<input type="text" class="form-control" id="usr" name="title" value="{{$post->title}}">


<label for="comment">Details:</label>
<textarea class="form-control" rows="5" id="comment" name="detail"
placeholder="Write a new post.">"{{$post->message}}"</textarea>
<input type="hidden" name="id" value="add">
<a href="/" class="btn btn-danger" role="button">Cancel</a>
<div class="pull-right">
<input type="submit" class="btn btn-success" value="Update">


It looks like this: enter image description here

Now, if I use Laravel's Form class, it's much smaller and neater:

{{Form::model($post, array('method' => 'PUT', 'route' => array('post.update', $post->id)))}}
{{ Form::label('title', 'Post Title: ') }}
{{ Form::text('title') }}
{{ $errors->first('title') }}
{{ Form::label('message', 'Post Message: ') }}
{{ Form::text('message') }}

{{ $errors->first('message') }}
{{ Form::submit('Update') }}
{{ Form::close() }}

However, this causes the form to look quite ugly:

enter image description here

So, in short, is there anyway to use Laravel's form class and add boostrap styling/buttons to it? I want the functionality and easy of use of the form class with the visuals of bootstrap.


You need to add the class to each input (here is an exemple)

   {{Form::model($post, array('method' => 'PUT', 'route' => array('post.update', $post->id)))}}
   {!! Form::label('title','Post Title: ', array('class' => 'pull-left'))  !!}
   {!! Form::text('title', null, ['class' => 'form-control'])!!}
   {!! Form::label('message','Post Message: ', array('class' => 'pull-left'))  !!}
   {!! Form::textarea('message', null, ['class' => 'form-control'])!!}
    <a href="/" class="btn btn-danger pull-left" role="button">Cancel</a>
   {!! Form::submit('Update',  ['class' => 'btn btn-success pull-right']) !!}
   {!! Form::close() !!}

enter image description here