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
}
Related
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 a form, I have in this two fields inline because they are in a form-inline div, I want to put the label of these above the fields and not next to them. How to remove form-inline from them without affecting the fields?
Here is a CodePen
<main id="contact_part">
<article class="mb-5 row">
<h1>Nous Contacter</h1>
<div class="col-md-12">
<form action="" method="post" id="contact_form">
<div class="form-inline">
<label class="" for="name_contact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>
<label class="" for="lastNameContact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
</div>
<div class="form-group">
<label class="" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
</div>
<div class="form-group">
<label class="" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
</div>
</form>
</div>
</article>
</main>
#contact_part article {
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
#contact_part .row {
display: block;
}
#contact_part h1 {
font-size: 1.7rem;
text-transform: uppercase;
margin-bottom: 3rem;
text-decoration: underline;
text-align: center;
}
#contact_form {
width: 50%;
margin: 0 auto;
}
#contact_form .form-inline label {
}
#contact_form input, #contact_form textarea {
border: none;
border-bottom: 1px solid #C6C6C6;
background-color: #FFF989;
}
If I understand correctly you no need to use form-inline class instead use like below code. Your form will look good.
<main id="contact_part">
<div class="container">
<article class="mb-5 row">
<div class="col-12">
<h1>Nous Contacter</h1>
</div>
<div class="col-12">
<form action="" method="post" id="contact_form">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="name_contact">First Name</label>
<input type="text" class="form-control" id="name_contact" placeholder="First Name" required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="lastNameContact">Last Name</label>
<input type="text" class="form-control" id="lastName_contact" placeholder="Last Name" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="example#example.com" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</article>
</div>
</main>
Code Pen.
Use col-12 instead of col-md-12 class for better performance. Don't use row without container or container-fluid. If you use only row it give you horizontal scroll bar. Your code will look like this.
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
Or
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
</div>
Fluid view or 100% Browser width
<div class="container-fluid">
<div class="row">
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
</div>
</div>
Hope this help!
Here you go, let me know if this works: https://codepen.io/luke-richter/pen/XWJVqWO
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#contact_part{
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<main id="contact_part">
<div class="container ">
<div class="row">
<h2>Inline form with heading above inputs</h2>
</div>
<form action="#">
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-sm">
<label for="firstname" class="control-label">Firstname1</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name2</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name3</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-3"><br>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
Try this,
.form-inline label
{
margin-bottom:3em;
}
Or You can move the label outside the<div class="form-inline">
I have a website that uses Bootstrap 4. In my design the contact form looks like this:
But in my actual website it looks like this:
I've tried using floats and i've also tried creating rows and columns to get them to align correctly but nothing works.
footer input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
display: inline-block;
}
footer button.btn {
display: flex;
justify-self: flex-end;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}
<div class="col-md">
<form action="" method="post">
<div class="row">
<label for="name">Nombre</label>
<input type="text" name="name">
<label for="email">Email</label>
<input type="text" name="email"><br>
<div class="form-group row">
<label for="message">Asunto</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
<button type="submit" class="btn btn-info">Enviar</button>
</div>
</div>
</form>
</div>
All of my code: https://codepen.io/Wibblefish/pen/ZVEdqz
Thank you.
You can try making use of bootstrap's flexbox utilities :)
input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
}
footer button.btn {
display: flex;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container p-5 d-flex justify-content-center align-items-center"
<form>
<div class=" d-flex justify-content-center align-items-center flex-column">
<div class="form-group align-self-start">
<label for="name" class="mx-1">Nombre</label>
<input type="text" name="name">
</div>
<div class="form-group align-self-start">
<label for="email" class="mx-3">Email</label>
<input type="text" name="email">
</div>
<div class="form-group d-flex justify-content-center">
<label for="message" class="mx-2">Asunto</label>
<textarea name="message" class="mx-2" id="" cols="30" rows="10"></textarea>
<button type="submit" class="btn btn-info align-self-end mx-2">Enviar</button>
</div>
</div>
</form>
</div>
Also, here's a working example :)
Please place your button in out side the form-group div
footer input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
display: inline-block;
}
footer button.btn {
display: flex;
justify-self: flex-end;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}
<div class="col-md">
<form action="" method="post">
<div class="row">
<label for="name">Nombre</label>
<input type="text" name="name">
<label for="email">Email</label>
<input type="text" name="email"><br>
<div class="form-group row">
<label for="message">Asunto</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-info">Enviar</button>
</div>
</form>
</div>
Instead of using custom CSS for alignment and spacing, read the docs and utilize Bootstrap.
<form action="" method="post">
<div class="form-row mb-2">
<label for="name" class="col-md-3 text-right">Nombre</label>
<input type="text" name="name" class="col-md-7 form-control">
</div>
<div class="form-row mb-2">
<label for="email" class="col-md-3 text-right">Email</label>
<input type="text" name="email" class="col-md-7 form-control">
</div>
<div class="form-row mb-2">
<label for="message" class="col-md-3 text-right">Asunto</label>
<textarea name="message" id="" cols="30" rows="10" class="col-md-7 form-control"></textarea>
<button type="submit" class="btn btn-info col-md-2 align-self-end">Enviar</button>
</div>
</form>
Demo: https://www.codeply.com/go/nJ0HHdEB1V
With this method you want need all the extra CSS.
I'm trying to align recaptcha box with input fields using bootstrap. I used this code on ckeditor. The position of recaptcha changed when the time out for captcha was display. How to keep the position of recaptcha box same even after display error?
.g-recaptcha {
margin-left: -1px!important;
margin-top: -50px
}
width: 300px; !important;
.captcha{
margin-left:7px;
margin-top:-47px!important;
}
.recaptcha-wrap {
position:relative;
height:76px;
padding:1px 0 0 1px;
background:#222;
>div{
position:absolute;
bottom: 2px;
right:2px;
font-size:10px;
color:#ccc;
}
}
width: 300px; !important;
.captcha{
margin-left:7px;
margin-top:-47px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post"
id="contact">
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope" ></i> </span> <input class="form-control" id="email" name="email" placeholder="Email" type="text" value="" /></div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-user" ></i> </span> <input class="form-control" id="name" name="name" placeholder="Name" type="text" value="" /></div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group"> </div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group captcha"><input data-error="Check `I am human` !" id="recaptchaValidator" name="recaptcha" pattern="1" required="" style="visibility: hidden" type="text" value="" />
<div class="g-recaptcha" data-callback="test" data-sitekey="6Lc7vh8UAAAAAEkcVjo-Cz5rOKSmE22V7x8-0MXP" name=""> </div>
</div>
</div>
</div>
</form>
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>