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

Question

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

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.

serraosays · Accepted Answer · 2015-11-03 20:11:47Z

3

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
}

edited Nov 3, 2015 at 20:11

answered Nov 2, 2015 at 17:37

serraosays

8,0993 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brent Connor Over a year ago

CSS selector .form-container button didn't apply the style to the submit button. The element type is not button, it's input. I don't want to apply the style rule to all inputs in the form.

serraosays Over a year ago

You can target a specific input within the container - I updated the code to show you how. Same pattern I explained in the answer.

ScaisEdge · Accepted Answer · 2015-11-02 17:25:19Z

0

try adding .btn-sm in your button

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

answered Nov 2, 2015 at 17:25

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

1 Comment

handaru Over a year ago

Yup, you gave the best answer @scaisEdge

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related