CODEWITHSUNDEEP
csstwitter-bootstraplaravel-5
Brent Connor
Brent Connor

Reputation: 628

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.

Upvotes: 0

Views: 1106

Answers (2)

serraosays
serraosays

Reputation: 7869

Wrap the whole form with a div that has a custom class - call it .form-container - and then override the style within the custom container. This is super easy if you are using Sass, not much harder if you are using CSS though.

HTML - just add custom class:

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

    <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() !!}

Sass:

.form-container {
  input[type="reset"] {
    // style here
  }
}

CSS:

.form-container input[type="reset"] {
    // style here
}

Upvotes: 3

ScaisEdge
ScaisEdge

Reputation: 133380

try adding .btn-sm in your button 

<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>

Upvotes: 0

Related Questions