lundi 2 novembre 2015

Bootstrap CSS form class is overiding btn class for submit button styling

I'm using laravel to create a form styled with bootstrap css.

{!! Form::open(['url' => '/hold', 'method' => 'POST', 'class' => 'form-horizontal']) !!}

    <div class="form-group">
        {!! Form::label($detail->name, NULL, array('class'=>'control-label')) !!}
        {!! Form::text('detail['.$detail->name.']', null, ['class' => 'controls']) !!}
    </div>

    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
    {!! Form::submit('Hold', ['class'=>'btn btn-danger', 'style' => 'float:right;']) !!}

{!! Form::close() !!}

creates a disparity in button sizes

According to Chrome dev tools, the css selector that is overriding the .btn style rules is button, html input[type="button"], input[type="reset"], input[type="submit"]

I'm guessing that the html input class takes precedence over the btn class. I do not know how to prevent this and force btn to take precedence.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire