I have 2 <input> fields next to each other. The thing I want to achieve is similar to the for class class="input-group-addon" in Bootstrap - unfortunately it's only for <span>.
How can I merge these inputs to one?
jsFiddle
This is what I am looking for:
Try this
css:
#firstInput {
width: 30%;
display: inline-block;
float: left;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
#secondInput {
width: 70%;
display: inline-block;
float: left;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left:0px;
}
and the HTML:
<div class="form-group">
<label for="firstInput">First Input</label>
<div>
<input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control">
<input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control">
</div>
</div>
link https://jsfiddle.net/DTcHh/30252/
<div class="row">
<div class="col-md-2">
<div class="form-group">
<input
type="text"
id="firstInput"
name="firstInput"
ng-model="obj.firstInput" class="form-control">
<input
type="text"
id="secondInput"
name="secondInput"
ng-model="obj.secondInput" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input id="numbers" name="numbers" type="number" ng-model="obj.num" class="form-control" min="0" />
<span class="input-group-addon">%</span>
</div>
</div>
</div>
body {
margin: 10px;
}
#firstInput, #secondInput {
float: left;
width: 50%;
}
#firstInput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
#secondInput {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Try something like this with custom CSS:
CSS:
.input-group .form-control {
width:45%;
margin-right:0%;
}
HTML:
<div class="input-group">
<input type="text" class="form-control" id="exampleInput"
placeholder="fname">
<input type="text" class="form-control" id="exampleInput1"
placeholder="lname">
DEMO
Another Not exact but similar way can be using form-inline.
.form-group{
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="form-group" style="float:left;">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;">
</div>
<div class="form-group" >
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-left:0px;">
</div>
</div>
Combine bootstrap's form-controls/input fields
.form-control{
border-radius: 0 !important;
}
.input-group .form-control {
margin-right:0%;
width:50% !important;
/* width:100px !important;*/
}
.input-group .form-control:last-child{
margin-left:-1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</body>
</html>
https://jsfiddle.net/DTcHh/30255/
Use below css to get the desired output
.form-group {
float: left;
}
.form-group #secondInput{
margin-top: 4px;
border-radius:0;
width: 300px;
}
.form-group #firstInput{
border-radius:0;
width: 100px;
}
Try this:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
<div class="form-group">
<label for="firstInput"></label>
<input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control" style="border-radius:0">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
<div class="form-group">
<label for="secondInput"> </label>
<input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control" style="border-radius:0">
</div>
</div>
</div>
Related
i want to get this file upload button to the right side like other text boxes.
tried editing the CSS file seems not working.
I'll put the CSS code and HTML code below.
if I can add something like add your image like drag and drop option that'll be very cool :)
little left algin the file upload area
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="PostYourAD.css" type="text/css">
</head>
<body>
<div class="navmenu">
<ul>
<li>Home</li>
<li>Post Your AD</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logo" align = "left" width="150" height="150" />
</div>
<br><br><br><br><br><br><br><br>
<h1 align = "center">Post Your AD</h1>
<br><br>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="images">Upload Your Images</label>
<div class="col-75">
<input type="file" id="myFile" name="filename">
</div>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="name">Name</label>
</div>
<div class="col-75">
<input type="text" id="name" name="name" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="location">Location</label>
</div>
<div class="col-75">
<input type="text" id="location" name="location" placeholder="Your Location..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="price">Price</label>
</div>
<div class="col-75">
<input type="text" id="price" name="price" placeholder="Enter the Price..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="pnumber">Phone Number</label>
</div>
<div class="col-75">
<input type="text" id="pnumber" name="pnumber" placeholder="Your Phone Number..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="Type">Type</label>
</div>
<div class="col-75">
<select id="type" name="type">
<option value="type">Select a Type</option>
<option value="land">Land</option>
<option value="vehicale">Vehicale</option>
<option value="house">House</option>
<option value="annex">Annex</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="description">Description</label>
</div>
<div class="col-75">
<textarea id="description" name="description" placeholder="Write Your Description.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
CSS code
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
text-align: justify;
vertical-align:super;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=file] {
text-align: justify;
vertical-align:super;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: middle;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: right;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
It seems like one of the closings tags in your file input code is misplaced:
You have this:
<div class="row">
<div class="col-25">
<label for="images">Upload Your Images</label>
<div class="col-75">
<input type="file" id="myFile" name="filename">
</div>
</div>
</div>
You should have this:
<div class="row">
<div class="col-25">
<label for="images">Upload Your Images</label>
</div>
<div class="col-75">
<input type="file" id="myFile" name="filename">
</div>
</div>
Reading you HTML code, you're closing the "html" tag, but the opening one, which should be below the doctype, is missing.
If I may, I don't know if it's the copy / paste who misaligned your tags, but I advise you to always align your tags correctly, or use a formatter. It will help you to edit your code and to spot small errors like this one more easily ;)
You placed the </div> for an element of the class col-75 wrongly. Here's the corrected version: https://jsfiddle.net/fw26y5pe/.
I have created a panel for my webpage. The panel contains two text boxes with labels. As of now the two text boxes are in the same row. I want each text box to be in a different row. How should I do it? I have tried including the <br> inside the panel.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
</style>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-3">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-3">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="save"></label>
<div class="col-md-8">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can see two text boxes with name and email coming in one row.
What I have tried is
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
by referring to this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_stacked_form,
but its not working. What am I doing wrong?
You want something like this?
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-7">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-7">
<input id="candidate-email" name="candidate-email" type="email"
placeholder="johndoe#example.com" class="form-control input-md" required>
</div>
</div>
</div>
Or Like this:
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-3 col-sm-3 clo-xs-3">
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your name</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-4 clo-xs-3" >
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your email</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
</div>
</div>
</div>
</div>
Issue is using col remove that col form label and input will fix the issue
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group ">
<label class=" control-label"><span style="color:red">*</span>Enter your name</label>
<div class="">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label"><span style="color:red">*</span>Enter your email</label>
<div class="">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label" for="save"></label>
<div class="">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.
I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.
So far all I have is the fields inside a div:
<div class="container" align="center">
#formContainer{
width:40%;
margin:auto;
}
#formC{
width:100%;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
.theLabels{
width:30%
float:left;
}
.theInputs{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
<div class="column">
<label class="theLabels">
URL:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Code Base:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Email:
</label>
<input class="theInputs" type="email"/>
</div>
</div>
</form>
</div>
</body>
</html>
If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps
Are you using Bootstrap?
Make a main div and place everything inside it.. like
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
See HERE
A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.
Fiddle:
https://jsfiddle.net/7mnxwdgv/14/
<html>
<head>
<style type="text/css">
div.container {
width: 350px;
padding: 15px;
margin: 50px auto 0px auto;
clear: both;
overflow: hidden;
}
div.container span.label-holder {
display: block;
width: calc(25% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder {
display: block;
width: calc(75% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form>
<span class="label-holder"><label for="url">URL</label></span>
<span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>
<span class="label-holder"><label for="code-base">Code Base</label></span>
<span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>
<span class="label-holder"><label for="from">From</label></span>
<span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>
<span class="label-holder"><label for="to">to</label></span>
<span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>
<span class="label-holder"><label for="email">Email</label></span>
<span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>
<span class="label-holder"><label for="app-serv">Application Servers</label></span>
<span class="input-holder">
<select name="app-serv" id="app-serv">
<option value="Incent">Incent</option>
</select>
</span>
</form>
</div>
</body>
</html>
I created a simple Bootstrap "input-group" sample, which works fine in Chrome, but does not work in IE and Firefox.
As you can see in this sample, the "Help" button does not fill the full height of its parent. In Chrome (Version 58) it works as expected.
Remove padding-top and padding-bottom
.input-group {
width: 100%;
}
.input-group-btn {
height: 100%;
}
.btn {
height: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
Please set a height for input-group.
.input-group {
width: 100%;
height: 10px;
}
Then it should work like expected.
There is also another good answer for this problem here.
The parent needs height: 100%
.input-group {
width: 100%;
}
.input-group-btn, .outer, .btn {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group outer">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
I am trying to change the default Bootstrap form style to get a similar form style like the picture show (just a underline)
However, I can't delete the default grey border that the Bootstrap form has. How can I delete it. (Please find attached to this post the code)
To sum up, I would like to keep the red bottom line and delete the grey lines of my code.
Thanks
.form-control {
background-color: transparent !important;
background-image: none !important;
border-bottom-color:red !important;
border-bottom-style:solid !important;
border-bottom-width:1px !important;
border-radius: 0 !important;
box-shadow: 0 !important;
display: block !important;
font-size: 15px !important;
height: 45px !important;
line-height: 1!important;
padding: 5px 20px 20px 14px;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- form -->
<div class="container">
<div class="row">
<div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40">
<form class="form-horizontal">
<fieldset>
<!-- Name input-->
<div class="form-group row">
<div class="col-md-6">
<input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="">
</div>
<!-- Email input-->
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required="">
</div>
</div>
<!-- Subject input-->
<div class="form-group">
<div class="col-md-12">
<input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" id="Message" name="Message">Message</textarea>
</div>
</div>
</fieldset>
<div class="col-md-12">
<div class="row">
<button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black">Send</button>
<div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.form--></body>
</html>
Add the following css to form-control
border: solid 1px red !important; border-width: 0 0 1px 0 !important;
.form-control {
border: solid 1px red !important;
border-width: 0 0 1px 0 !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
box-shadow: 0 !important;
display: block !important;
font-size: 15px !important;
height: 45px !important;
line-height: 1!important;
padding: 5px 20px 20px 14px;
width: 100%;
box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- form -->
<div class="container">
<div class="row">
<div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40">
<form class="form-horizontal">
<fieldset>
<!-- Name input-->
<div class="form-group row">
<div class="col-md-6">
<input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="">
</div>
<!-- Email input-->
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required="">
</div>
</div>
<!-- Subject input-->
<div class="form-group">
<div class="col-md-12">
<input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" id="Message" name="Message">Message</textarea>
</div>
</div>
</fieldset>
<div class="col-md-12">
<div class="row">
<button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black">Send</button>
<div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.form--></body>
</html>
Set the Border:0px then set the Border-bottom-width. That's all you need.
.form-control {
background-color: transparent !important;
border: 0px solid !important;
border-radius: 0 !important;
background-image: none !important;
border-bottom-color: red !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
box-shadow: none !important;
display: block !important;
font-size: 15px !important;
height: 45px !important;
line-height: 1!important;
padding: 5px 20px 20px 14px;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- form -->
<div class="container">
<div class="row">
<div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40">
<form class="form-horizontal">
<fieldset>
<!-- Name input-->
<div class="form-group row">
<div class="col-md-6">
<input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="">
</div>
<!-- Email input-->
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required="">
</div>
</div>
<!-- Subject input-->
<div class="form-group">
<div class="col-md-12">
<input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" id="Message" name="Message">Message</textarea>
</div>
</div>
</fieldset>
<div class="col-md-12">
<div class="row">
<button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black">Send</button>
<div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.form-->
</body>
</html>
** Method-1 :Direct Update bootstrap Class**
.form-control
{
border:none !important
}