This question already has answers here:
Bootstrap 4 form input with icon for validation
(3 answers)
Closed 4 years ago.
form-control-feedback does not seem to be part of bootstrap 4. What's the best way to achieve the below result (icon inside the textbox) using bootstrap 4?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group has-warning has-feedback">
<div class="col-sm-10">
<input type="text" class="form-control">
<span class="form-control-feedback"><i class="fa fa-rotate-right"></i></span>
</div>
</div>
</form>
</div>
</body>
You could just jack the css class and apply it (notice the v4 cdn) the same but minus the fixed sizing conventions like;
.form-control-feedback {
position: absolute;
top: .5rem;
right: 1.5rem;
z-index: 2;
display: block;
text-align: center;
pointer-events: none;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group has-warning has-feedback">
<div class="col-sm-10">
<input type="text" class="form-control">
<span class="form-control-feedback"><i class="fa fa-rotate-right"></i></span>
</div>
</div>
</form>
</div>
</body>
However, note that if you go in and play with the sass settings for your input sizing etc, the top and right values will need tweaked accordingly along with possibly a font-size added.
Related
I wonder if you can help me please. I have multiple checkbox inputs and I tested in many devices and browsers. Only in Apple 13.7 I see my checkboxes inputs round and really small, like this in the image:
My html:
form-group {
margin-bottom: 15px;
}
.dataallow {
display: flex;
}
.dataallow input {
margin-right: 8px;
}
label {
color: #595959;
}
.dataallow label {
margin-left: 3px;
margin-bottom: 0;
}
.size-small {
font-size: 13px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group dataallow">
<input type="checkbox">
<label class="gray-25 size-small">Text text text text</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group dataallow">
<input type="checkbox">
<label class="gray-25 size-small">Text text text text</label>
</div>
</div>
</div>
I also use bootstrap 3 in it.
Just add a min-width: 20px to the input element.
It happens in iOS when the label has a lenght more than usual.
How can I center the text and the checkbox which has the caption "Address same as above". I use bootstrap and tried to center it but nothing helped.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="hr-sect col-xs-12">Home Address</div>
<div class="form-group required">
<div class="col-xs-12 center-block" >
<div class="col-xs-4 col-xs-offset-4 checkbox">
<input type="checkbox" name="chkIsSameHomeAddress" id="chkIsSameHomeAddress" class="AddressCheckBoxShowGroup checkbox" value="false">
</div>
<label for="chkIsSameHomeAddress" class="control-label col-xs-4">Address same as above</label>
</div>
</div>
Below is the out put I get I need to center the control and the label.
Hope this may help you
.checkbox.form_div label{
padding-left: 0;
}
.form_div input{
display: inline-block;
position: relative;
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="hr-sect col-xs-12">Home Address</div>
<div class="form-group required col-xs-12">
<div class="col-xs-4 col-xs-offset-4 checkbox form_div text-center">
<input type="checkbox" name="chkIsSameHomeAddress" id="chkIsSameHomeAddress" class="AddressCheckBoxShowGroup checkbox" value="false">
<label for="chkIsSameHomeAddress" class="control-label">Address same as above</label>
</div>
</div>
Stripping it right back you can do this:
(the border, line-height and font-size are there simply to exaggerate the vertical-align)
.verticalMiddle {
border: solid black 1px;
font-size: 1.5em;
line-height: 2em;
vertical-align: middle;
}
<h1>Home Address</h1>
<div class="verticalMiddle">
<input type="checkbox">
<label >Address same as above</label>
</div>
I have the following HTML element with bootstrap:
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
If you see there is a gray area (panel-footer):
The button uses pull-right class also that is float:right, but I would like the gray area that is actually the panel-footer div to fit within the button height.
This is the styles for panel-footer:
And this for the pull-right:
Any clue?
UPDATE:
I added after the button:
<div class="clearfix"></div>
And seems that fixed the problem. Is that ok?
Original Answer (2017)
you can try this (Bootstrap 3)
<div class="panel-footer text-right">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
You just need to add text-right class to your panel-footer.
It works for me.
Updates (2023-01-11)
Bootstrap 5
Use class text-end to make button realign to the right side.
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body class="p-4">
<div class="panel-footer text-end">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
Bootstrap 4 & 3
Use class text-right will make the alignment to the right.
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body class="p-4">
<div class="panel-footer text-right">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
I ran your code you provided in a jsFiddle and got the same results. Even placing the button within the panel panel-default, still got the same results.
Here is a fix.
I created a jsFiddle
It includes two example one using your code with an override and one using a panel panel-default and panel-body with a css override.
hope that helps.
.panel-footer {
height: 50px !important;
}
#sep {
margin-top: 10px;
}
.panel-body {
background: #f3f3f3 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
<div id="sep"></div>
<div class="panel panel-default">
<div class="panel-body">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
This is working for me.
<div class="footer">
Save
</div>
<div class="panel-footer">
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
This will work properly.
I'm new to bootstrap and was wondering how could I place my icon/picture inline to the right of my textfield?
I would like my textField to be a little bit smaller (without hardcoding anything) so the image is on the same line, using the same space. I should work with any col-*-* screen size.
This is my code right now. The image is under the textfield instead of at it's right.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<br>
<br>
<div class="col-lg-6">
<div class="input-group" style="float:left;">
<textarea class="form-control"></textarea>
<div style="float:left;"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></div>
</div>
</div>
PS: I tried to use form-inline with form-controlon the text field and the image, but it did not work. It's possible I did something incorrectly.
Use proper markup for input group and just override the styles you don't want:
.input-group .input-group-addon {
background-color: transparent;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<br>
<br>
<div class="col-lg-6">
<div class="input-group">
<textarea class="form-control"></textarea>
<span class="input-group-addon" id="basic-addon1"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></span>
</div>
</div>
I am currently trying to put a whole page background but it is being shifted to the bottom because of the bootstrap form. I want the image to take the entire page and the bootstrap form to stay where it is. Also, how do I shrink the form slightly so it takes maybe half a page width?
This is my code:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
html{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div">
<div class="panel panel-default">
<form id="iForm">
<div class="row">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Would mean a lot if someone could kindly help me out, as I am quite novice to web development
Thanks
Instead of setting the background in html you should set it in the body instead.
E.g.
body{
background:url('images/watchBackground.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
Fiddle
first set your picture to body background body{background:url("images/watchBackground.jpg") no-repeat center center fixed;}
then transparent elements that you want by inline css styling:style="background-color:transparent;"
your correction code is this:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
body{
background:url('k.jpg') no-repeat center center fixed;
}
</style>
<body>
<div class="container">
<h1>Contact Us Page</h1>
</div>
<div class="container center_div" style="background-color:transparent;">
<div class="panel panel-default" style="background-color:transparent;">
<form id="iForm" style="background-color:transparent;">
<div class="row" style="background-color:transparent;">
<div class="col-md-6">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
<span class="error_form" id="errorForename">Test</span>
</div>
<div class="col-md-6">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</div>
</div>
<fieldset class="form-group">
<label for="Email Address">Email Address</label>
<input type="text" class="form-control" id="emailAddress" placeholder="Email Address">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
#benj Your css is all good. It's just that your body color is set to white (bootstrap default - coming from scaffolding in your case) and that white color is overlapping over your background image. You need to set it to transparent.
body {
background-color: transparent;
}
for form container width (shrink issue)...just wrap the whole panel into the bootstrap grid column..for example...
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
.........
......Your form code.......
...............
</div>
</div>
Adjust column width and offset value as per your requirement