Hello my dear friends! How are doing? Hope you all are fine. Today I am going to share another CSS tutorial with you. In this we are going to see how to remove bootstrap input field border. If you have used bootstrap you might have notice there is a border in input field. You can remove it by setting border none CSS. Yet when we click inside input field to type there is another border showing. We cannot disable it from easily. For that sometimes input CSS file class might works sometimes not. At that scenario you have to write style as a style tag in your header tag. Let’s see the tutorial then.
Post Outline
- Tools and Technologies for Project
- HTML Code
- HTML Code with form-control class
- CSS code with form control class
- Code Explanation
- HTML Code without form control class
- CSS code for without form control class
- Conclusion
Tools and Technologies for Project
- CSS
- HTML
- Bootstrap
- XAMPP Server
- PHP
I am creating this as a php file. Therefore I need XAMPP server to visible the output. If you are not using php then you can simply use HTML only. You can get the bootstrap from official bootstrap website. All you have to do it add js and CSS files of bootstrap to your project.
HTML Code
Before sharing code I must say something. That is there are several ways of doing this. If you are using form control class in bootstrap then write CSS for that. If you are not using it you can simply use focus keyword to disable it.
HTML Code with form-control class
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">
<!-- Custom styles for this template-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="scripts/jquery-3.3.1.min.js" ></script>
<script src="scripts/jquery-ui-1.12.1/jquery-ui.js" ></script>
<script src="scripts/popper.min.js" ></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js" ></script>
<title>Hello, world!</title>
<style type="text/css">
.form-control:focus {
border-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<div class="row m-2">
<!--------- this is normal input feild -------------->
<div class="col-lg-4">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
<!--------- input feild border and outline removed -------------->
<div class="col-lg-4">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control input-styles" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
</div>
</body>
</html>
CSS code with form control class
<style type="text/css">
.form-control:focus {
border-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
.input-styles{
border: 2px solid #fff;
}
Code Explanation
Here I have showed normal input feild with form control. Below div I did the modification. By using input-style CSS you can make the border removed. You can either write border none or make border to white color. But it won’t remove the outline. For that you have to write style tag for form control class. You can see in the screen shot the cursor is place inside input yet there is no any border and outline.
HTML Code without form control class
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">
<!-- Custom styles for this template-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="scripts/jquery-3.3.1.min.js" ></script>
<script src="scripts/jquery-ui-1.12.1/jquery-ui.js" ></script>
<script src="scripts/popper.min.js" ></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js" ></script>
<title>Hello, world!</title>
<style type="text/css">
input:focus{
outline: none;
}
</style>
</head>
<body>
<div class="row m-2">
<!--------- this is normal input feild -------------->
<div class="col-lg-4">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
<!--------- input feild border and outline removed -------------->
<div class="col-lg-4">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="input-styles" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
</div>
</body>
</html>
CSS code for without form control class
<style type="text/css">
input:focus{
outline: none;
}
</style>
.input-styles{
border: 2px solid #fff;
}
Conclusion
I hope you understood how to remove border and outline of bootstrap input field. If you like this post please share this among friend. Don’t forget to like and comment. Inside myexamnote.com you can find many web development tutorials. If you interested please check how to create a search box with overlap button at end. We will meet with another interesting post. Till then goodbye all.
Thanks for the good article, I hope you continue to work as well.
Thanks for the good article, I hope you continue to work as well.Спаситель на продажу
Thank you
Very great post. I simply stumbled upon your weblog and wished to mention that I have truly loved browsing your weblog posts. After all I’ll be subscribing to your rss feed and I’m hoping you write once more soon!
Thank you so much.
Thank you for any otһer informative wеbsite. The place
else coᥙld I am getting that kіnd of info written in such a perfect means?
I’ve a undertaking that I am simply noѡ opｅrating on, and I’ve bеen at the ⅼook оut fօr such information.
Thank you.
I genuinely treasure your piece of work, Great post.
Thank you