Bootstrap: Remove form field border

Question

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.

Answer 1

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 */ } 

Answer 2

In Bootstrap 4, you can add border-0 class to your element to remove its border.

Other classes that you can use - Bootstrap 4 Borders

<span class="border-0"></span>             /* remove all borders */ <span class="border-top-0"></span>         /* remove top border */ <span class="border-right-0"></span>       /* remove border on the right */ <span class="border-bottom-0"></span>      /* remove bottom border */ <span class="border-left-0"></span>        /* remove border on the left */ 

And here is a working example for what you asked:

$("#myButton").click(function() {    $("#myInput").toggleClass('border-0')  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form>    <input id="myInput">    <input id="myButton" type="button" value="Toggle Border">  </form>