twitter-bootstrap

Bootstrap: Remove form field border

I am new to CSS and I am using Bootstrap and I want to use forms in 2 ways: With or without borders around the form fields. How can I achieve that best? Here is an example of a Bootstrap form I want to remove the borders for: plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.

For curiosity, the reason I want this, is that I want to first show the user the data he has, and then toggle showing the borders according to if the form is in "edit" mode or not. The user can enter "edit" mode by clicking an "edit"-link or just start editing a field.

Solution

  • In that example, to remove the border simply write:

    .form-control {
    border: 0;
}

    In your CSS file.

    This will remove borders from all your form fields though, a more flexible approach would be to attach a class to the form fields you want to have no border, so your HTML would be something like:

    <input type="email" class="form-control no-border" id="inputEmail3" placeholder="Email">

    and your CSS:

    .no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}