All geek questions in one place

Bootstrap: remove form field field

I am new to CSS and I use Bootstrap and I want to use forms in two ways: with or without borders around the form fields. How can I do this best? Here is an example Bootstrap form. I want to remove borders for: plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.

For curiosity, the reason why I want this is because I want to first show the user the data that he has, and then switch the display of the borders in accordance with the form in edit mode or not. The user can enter the editing mode by clicking the "edit" -link or just start editing the field.

+11
source share
2 answers

In this example, to remove a border, simply write:

.form-control { border: 0; }

In your CSS file.

This will remove the borders from all the fields of the form, but a more flexible approach is to attach the class to the fields of the form that you want to have no borders, so your HTML code will look something like this:

 <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 */ }
+47
source

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

Other classes 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 of 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>

+9
source

Source: https://habr.com/ru/post/1203367/

More articles:


All Articles