Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap styling Rounded Corners

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?

like image 236
Stephenmelb Avatar asked Feb 27 '14 23:02

Stephenmelb


People also ask

How do I make rounded corners in Bootstrap?

<div class="img-rounded"> will give you rounded corners.

What will the .rounded Bootstrap class do?

What will be the . rounded bootstrap class do? Bootstrap rounded corners classes helps you to easily round its corners.


2 Answers

change .form-control properties

.form-control{
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
like image 176
Mo. Avatar answered Oct 17 '22 21:10

Mo.


I see you have:

border-radius: 0px;

This makes square corners.

like image 26
henrywright Avatar answered Oct 17 '22 22:10

henrywright