I saw this pretty from from website.
I decided to make it using bootstrap 4, and I failed because of the space between two html input elements. It is neither padding nor margin, I have no idea what is it. I tried to remove the space several times but failed.
The space between two inputs giving me suffer.
This is HTML
<form action="" method="post">
<div class="form__wrapper">
<input type="email" name="email" class="newsletter" placeholder="Email address"/>
<input type="submit" class="newsletter__button"/>
</div>
</form>
This is CSS
.form__wrapper {
display: inline-block;
position: relative;
}
form {
display: block;
}
form input[type='email'], form input[type='text'] {
cursor: text;
-webkit-font-smoothing: antialiased;
width: 100%;
padding: 9px;
border: 1px solid #E1E0E1;
outline: none;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
.form__wrapper input[type='email'] {
width: 60%;
}
This gap origins from the space between two inline elements in the source code. that is parsed as a blank space.
However, you don't have to deal with this issue - for this case exactly, Bootstrap provides Input Groups. Just use the input-group class as a wrapper for the two form elements and the input-group-added as a wrapper for the button.
You can style the form elements by using a higher specificity in your selectors. The Icon can also be achieved by FontAwesome (see Nisarg Shahs good answer for that). Here is an example:
body {
padding: 2em;
}
.input-group>.form-control,
.input-group .btn {
border-radius: 0;
border-color: #e3e3e3;
text-transform: uppercase;
font-size: .8em;
line-height: 1.95em;
letter-spacing: 2px;
}
.input-group>.form-control {
border-right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input type="email" class="form-control" placeholder="Email Address" aria-label="Email Address" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">></button>
</div>
</div>
It is called an add-on in Bootstrap 4. Here's an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Submit</button>
</div>
</div>
You can combine that with FontAwesome, to get the desired result:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<button class="btn btn-outline-secondary">
<span class="fa fa-angle-right"></span>
</button>
</div>
</div>
Write both of your input tags in the same line. Here I've included the fiddle. You can see the difference. :)
<input type="email" name="email" class="newsletter" placeholder="Email address"/><input type="submit" class="newsletter__button"/>
Bootstrap has this built in:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input class="form-control newsletter" placeholder="Email" type="text">
<div class="input-group-append">
<input class="form-control"t type="submit" class="newsletter__button"/>
</div>
</div>
Related
I'm looking get this code:
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
To look like this
minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a field set but without either tags and the label inside the border of the text input. Thanks in advance!
Here is what you need. You can change the CSS values according to your need. Also important is to set the background-color of label to the same color as your form/html.
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
position:absolute;
top:-1px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
Hope this helps :).
You can use legend tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Contact</legend>
Name <input type="text"><br>
Email <input type="text"><br>
</fieldset>
</form>
</body>
</html>
When I look at the answers here, all of them are answered to save the moment, that is, when the background picture changes, the examples made explode, there is no such problem in my example, you can use it as you wish
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.textOnInput {
position: relative;
}
.textOnInput label {
position: absolute;
top: -15px;
left: 23px;
padding: 2px;
z-index: 1;
}
.textOnInput label:after {
content: " ";
background-color: #fff;
width: 100%;
height: 13px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
label {
font-size: 16px;
font-weight: 500;
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
box-shadow: none !important;
}
</style>
</head>
<body>
<div class="col-md-4 mt-5">
<div class="textOnInput">
<label for="inputText">Email</label>
<input class="form-control" type="text">
</div>
</div>
</body>
</html>
you should add position relative if you want more than one box and add some padding:
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
padding-left: 5px;
padding-right: 5px;
position:relative;
top:-20px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
<div class="form-group">
<label>Second name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
you can create an input and wrap it inside a fieldset:
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
and some basic css to remove the input border:
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
<fieldset class="border col-12 pt-0 pb-1 mx-auto ">
<legend class="w-auto mb-0">First Name</legend>
<input type="text" id="fname" name="fname" class="border-0 p-0 mx-auto pl-1" placeholder="abc#gmail.com">
</fieldset>
if you are using bootstrap4 play with class and easily solved it its worked for me you can adjust your class like p-1,ml-2.... etc
This can be achieved using pure html. It happens automatically when you nest legend tags in fieldsets
<fieldset>
<legend>Here is the legend<legend>
</fieldset>
I want to use the legend html tag to visually wrap a set of similar inputs in a form. It should look similar to how it does when one uses the legend attribute without bootstrap, like is shown here.
I made a bootply example which is here. As one can see: I am trying to create a legend which wraps the First Name and Last name input fields. The styling is not right.
I did already look at this question, but it is different than mine because I am attempting to use a legend within a grid.
Here's a way using custom CSS. Just add this CSS, and add .customLegend to the fieldset that will have a legend you want to display this way. Adjust the positioning, padding, etc as needed.
.customLegend {
border: 1px solid #e5e5e5;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0; left: 1em;
padding: 0 .5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<fieldset class="customLegend row">
<legend>Enter Your Name</legend>
<div class="form-group col-sm-6">
<label for="first_name">First Name:</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group col-sm-6">
<label for="last_name">Last Name:</label>
<input type="text" class="form-control" id="pwd">
</div>
</fieldset>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>
I'm making a site with bootstrap, and when I add border-radius: 4px to inputs/buttons, is adding shadow too.
Check image:
http://i.stack.imgur.com/K9pz8.png
How can I remove this shadow?
Add class="form-control to the input element it will remove shadow inside.
See demo:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
input {
border-radius: 5px;
margin: 10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="input-group">
<input type="text" class="" placeholder="without class">
<input type="text" class="form-control" placeholder="with class">
</div>
</div>
Try this
#usr{
border-radius:4px;
}
<div class="col-md-4"><div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div>
Note: Added class = "form-control".
Demo Here
Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.
currently I'm doing something like this, but the sign is out of the inputbox.
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.
You probably want this
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Js Fiddle Demo - Basic
Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class
.input-group-addon
{
background-color:#FFF;
}
Js Fiddle Demo - Without Background
If you want to remove the border from right side of $ sign, You can add this css as well
.input-group .input-group-addon + .form-control
{
border-left:none;
}
Js Fiddle Demo - Without Border
HTML:
<div class="col-xs-6" >
<div class="left-inner-addon">
<span>$</span>
<input type="text" class="form-control" placeholder="Amount" />
</div>
</div>
<div class="col-xs-6" >
<div class="right-inner-addon">
<span>$</span>
<input type="search" class="form-control" placeholder="Amount" />
</div>
</div>
CSS:
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 22px;
}
.left-inner-addon span {
position: absolute;
padding: 7px 12px;
pointer-events: none;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon span {
position: absolute;
right: 0px;
padding: 7px 12px;
pointer-events: none;
}
jsFiddle
Bootstrap Versions 4 and 5
This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.
To prepend text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="0.00" />
</div>
To append text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="email" />
<div class="input-group-append">
<span class="input-group-text">#gmail.com</span>
</div>
</div>
To change the background color of the added text
.input-group-text
{
background-color:#FFF;
}
You can to this by setting the input-group a position:relative and absolute positioning the input and the span with higher(than input's z-index) z-index number for span. Also you need to add to the input a padding-left value equal to span's width