I don't know why my fields in Bootstrap don't have the rounded corners. When I choose the Form Control input field in other parts of my website the corners are well rounded.
<div class='form-group'>
<div class='col-sm-12'>
{{ trans('Suburb') }}:
{{ Form::text('suburb', Input::get('suburb') ? e(Input::get('suburb')) : '', array('class' => 'suburb form-control')) }}
</div>
</div>
<div class='form-group'>
<div class='col-sm-4'>
{{ trans('Postcode') }}
{{ Form::text('postcode', Input::get('postcode') ? e(Input::get('postcode')) : '', array('class' => 'postcode form-control')) }}
</div>
<div class='col-sm-4'>
{{ trans('Region') }}:
{{ Form::text('region', Input::get('region') ? e(Input::get('region')) : '', array('class' => 'region form-control')) }}
</div>
<div class='col-sm-4'>
{{ trans('State') }}:
{{ Form::text('state', Input::get('state') ? e(Input::get('state')) : '', array('class' => 'state form-control')) }}
</div>
</div>
</fieldset>
In Chrome when I turn these settings off, it makes it round
media="all"
.user-profile .btn-group .form-control, .browse .btn-group .form-control {
border-top: 0px;
border-bottom: 0px;
border-radius: 0px;
margin-bottom: -1px;
}
How do I change the above code permanently?
<div class="img-rounded"> will give you rounded corners.
What will be the . rounded bootstrap class do? Bootstrap rounded corners classes helps you to easily round its corners.
change .form-control
properties
.form-control{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
I see you have:
border-radius: 0px;
This makes square corners.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With