How to create a rounded border around a div with bootstrap?

Question

I am using bootstrap 3. The input type=text elements are cool. Now I would like to create a similar rounded border around a div element. Anything I've tried seems ugly, Is it possible with bootstrap 3?

Thanks in advance

Answer 1

To quickly make a div look like a Bootstrap input, simply add a .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 form controls, panals have rounded corners and are more appropriate for divs.

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

Here is a JSFiddle demo of both options.

Answer 2

Since you're trying to emulate a bootstrap input, @James Lawruk's suggestion of using .form-control is the quickest simplest way to do it.

But if you want to learn how to emulate styling you see elsewhere (which you should), you need to inspect the css used in .form-control (if on Chrome, right-click and "inspect element"), copy the relevant styling, and create your own class to apply.

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 am ignoring a few pseudo-classes also attached to .form-control, like :focus, but pseudo-elements are a another reason you might not want to apply a class that was designed for another purpose.