How to create a rounded border around a bootstrap div?

Question

I am using bootstrap 3. Input type = text elements are cool. Now I would like to create a similar rounded border around a div element. Everything I tried seems ugly, is this possible with bootstrap 3?

Thank you in advance

Answer 1

As you are trying to emulate bootstrap input, @James Lawruk's suggestion for use. form-control is the fastest way to do this.

But if you want to learn how to emulate the style that you see elsewhere (what you need), you need to check the css used in .form-control (if in Chrome, right-click and "check element"), copy the corresponding style and create your own class.

In this case:

 .form-control{ display: block; width: 100%; /* THIS */ height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; /* THIS */ background-color: #fff; background-image: none; border: 1px solid #ccc; /* THIS */ border-radius: 4px; /* THIS */ } 

becomes

 .custom{ width: 100%; color: #555; border: 1px solid #ccc; border-radius: 4px; } 

NOTE. I ignore several pseudo-classes also associated with .form-control, for example: focus, but pseudo-elements are another reason why you would not want to use a class that was designed for another purpose.

Answer 2

To quickly make a div look like Bootstrap input, just add the .form-control class to your div.

 <div class="form-control">I am inside a div.</div> 

Also check out Bootstrap Panels . Since divs are not format controls, panamas have rounded corners and are more suitable for divs.

 <div class="panel panel-default"> <div class="panel-body">I am inside a panel.</div> </div> 

Here is the JSFiddle diagram for both parameters.