Yo man Yo man - 1 year ago 96
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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download