Yo man Yo man - 6 months ago 11
PHP Question

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

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

@section('content')
<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}}">

<br>

<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">
</div>
<a href="/" class="btn btn-danger" role="button">Cancel</a>
<div class="pull-right">
<input type="submit" class="btn btn-success" value="Update">
</div>
</form>


@stop


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') }}
<p></p>
{{ Form::label('message', 'Post Message: ') }}
{{ Form::text('message') }}

{{ $errors->first('message') }}
<p></p>
{{ 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

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'])!!}
    <br>
    <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

Comments