This question already has answers here:
Put icon inside input element in a form
(21 answers)
Search input with an icon Bootstrap
(8 answers)
How can I make an icon inside of a bootstrap 5 form-floating label clickable?
(1 answer)
Closed 5 months ago.
I'm trying to put an icon of Fontawesome inside an <input>, but I'm unable to do it. Is my first time using this icons.
I need them where the red circle is:
How can I do it?
I tried using differents position and some flex I couldn't do it.
This is my html:
<div class="mb-4 col-6 mx-auto">
<label for="password" class="form-label col-lg-offset-2">Password</label>
<span id="newPass" class="see_pass mx-3"><i id="eyeNewPass" class="fa-solid fa-eye"></i></span>
<input id="newPass" type="password" class="form-control" name="password" value="#ViewData["pass1"]" required />
</div>
Because all the style that I'm using is from Bootstrap 5 I can't show you what I'm using.
I need that the icon can be used, not only to decorate the input. When I click on it, the password is shown
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css" integrity="sha384-X8QTME3FCg1DLb58++lPvsjbQoCT9bp3MsUU3grbIny/3ZwUJkRNO8NPW6zqzuW9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="mb-4 col-6 mx-auto">
<label for="password" class="form-label col-lg-offset-2">Password</label>
<span id="newPass" class="see_pass mx-3"><i id="eyeNewPass" class="fa-solid fa-eye"></i></span>
<input id="newPass" type="password" class="form-control" name="password" value="#ViewData[" pass1 "]" required />
</div>
Can anyone help me?
Related
This question already has answers here:
How to align the checkbox and label in same line in html?
(13 answers)
Closed 1 year ago.
Goal:
I want text to come after my checkbox
Problem:
My p tag comes directly after my check box input, but I can't get them on the same line and Next to each other.
<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">
<div class="container">
<div class="row">
<div class="col">
<input type="checkbox">
</div>
<div class="col">
<p> Save My card for future payment</p>
</div><br>
</div>
</div>
Edit:
The best way to put Text after a checkbox or other user input button is to use a LABEL not a p tag.
<label for="check">text goes here</label>
<input type="checkbox" id="check">
If you're using Bootstrap as your class names suggest, this is the right way:
<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">
<div class="container">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Save my card for future payment
</label>
</div>
</div>
</div>
See the docs at https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios.
If not, use standard checkbox markup so your form is accessible to those using assistive technology (and more standard):
<label>
<input type="checkbox">
Save my card for future payment
</label>
Notice that in both cases the label is clickable.
I assume that your code look like that.
.checkbox_div {
display: flex;
align-items: center;
}
.checkbox_div p {
display: inline-block;
}
<div class="checkbox_div">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<p>Paragraph text </p>
</div>
If not then format your code look like that. Take checkbox input and p tag inside a div.
And then add some css which is given below.
Is it impossible change choose file text of input file in Bootstrap 5 using CSS like Bootstrap 4?
And how can I add a margin to "No file chosen"?
Bootstrap 5 + some CSS
Compose Bootstrap's custom file input with custom label.
Hide default Choose file button with the ::file-selector-button pseudo-element. There are pseudo-elements ::-webkit-file-upload-button and ::-ms-browse for older versions of Chrome/Opera/Safari and Edge/IE respectively. But bootstrap.css uses ::file-selector-button and ::-webkit-file-upload-button only. So I propose to do the same.
Add some more CSS for the :hover effect and for the thin border between the label and the input field.
Tested in Chrome, Firefox and Edge.
https://codepen.io/glebkema/pen/VwMQWGE
.custom-file-button input[type=file] {
margin-left: -2px !important;
}
.custom-file-button input[type=file]::-webkit-file-upload-button {
display: none;
}
.custom-file-button input[type=file]::file-selector-button {
display: none;
}
.custom-file-button:hover label {
background-color: #dde0e3;
cursor: pointer;
}
<div class="container py-3">
<div class="input-group custom-file-button">
<label class="input-group-text" for="inputGroupFile">Your Custom Text</label>
<input type="file" class="form-control" id="inputGroupFile">
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
If the file input is placed inside the label element and then hidden the label itself will act as the file input when it is clicked. Adding the form-control class and the tabindex attribute (which specifies that the element can be focused) to the label will then style it like a generic Bootstrap input.
<div class="input-group">
<span class="input-group-text">Custom Add-on Text</span>
<label class="form-control" tabindex="0">Custom Input Text
<input type="file" class="invisible">
</label>
</div>
https://codepen.io/yetiface/pen/PoQqrda
This solution has its downsides, for example the label element will not automatically receive bootstrap styles specifically for input[type='file']. However it is such a simple method that I felt it worth posting for those who it can help.
I needed to change both texts so this method helped
$('#review-image').change(function(e) {
let fileName = (e.target.files.length > 0) ? e.target.files[0].name : 'choose_file_not';
$('#review-image-label').text(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container mt-3">
<div class="input-group custom-file-button">
<label class="input-group-text" for="review-image" role="button">choose_file</label>
<label for="review-image" class="form-control" id="review-image-label" role="button">choose_file_not</label>
<input type="file" class="d-none" id="review-image" name="images[]" multiple accept="image/*">
</div>
</div>
Bootstrap 5 beta no longer provides a custom file input like Bootstrap 4 that used pseudo elements to override the browser's file input defaults. Therefore you'd have to use JS or make your own psuedo element to hide the Choose file.. area of the input...
#formFile::before {
content: "Pick file";
position: absolute;
z-index: 2;
display: block;
background-color: #eee;
width: 80px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container min-vh-100 py-2">
<div class="row">
<div class="col">
<div class="mb-3">
<input class="form-control" type="file" id="formFile">
</div>
</div>
</div>
</div>
I created an input group with a label, the input, and then appended another label. This way you can style it however you want and put custom text as the input group text. You then hide the input element (display:none or width:0 or something)
Examples:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<p>Label before</p>
<div class='input-group'>
<label class='input-group-prepend'>
<div class='input-group-text form-control' for='file-input-thing'>Pick File</div>
</div>
<input type='file' id='file-input-thing' style='width:0;'>
<label id='file-input-label' class='form-control' for='file-input-thing'/>
</div>
<p>Label after</p>
<div class='input-group'>
<label id='file-input-label' class='form-control' for='file-input-thing'/>
<input type='file' id='file-input-thing' style='width:0;'>
<div class='input-group-append'>
<label class='input-group-text form-control' for='file-input-thing'>
</div>
</div>
You can then assign styling to labels as you see fit. By making both piece labels tied into the input element it allows you to click on either and choose a file.
Further you can add an ID to the blank label and update the value to the name of the file.
let inputElement = document.getElementById('file-input-thing');
let inputLabel= document.getElementById('file-input-label');
inputElement.addEventListener('change', function(e) {
let file = e.target.files[0];
inputLabel.innerHTML = file.name;
})
I'm new to all this so there's probably a better solution, but this worked for me.
This is how I have implemented it,
just copy-paste it to your code and you'll see the results
<Button onClick={() => document.getElementById('imageFileSelect').click()}>Choose Image</Button>
<input className="form-control d-none" id='imageFileSelect' type="file" onChange={imageSelected}></input>
I am using bootstrap 3.3.7 and bootstrap datepicker v1.6.4. I have embedded the datepicker inside a div with class col-md-6, but it doesn't seem fill up the column.
HTML code:
<div class="form-group">
<label class="control-label col-lg-5 text-left">Select Date:</label>
<div class="col-lg-6">
<input type="text" class="form-control" placeholder="Choose your date..." readonly>
<div id="datepicker" data-date-format="mm/dd/yyyy"></div>
</div>
</div>
CSS:
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Datepicker -->
<link rel="stylesheet" href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
JavaScript:
<!-- Bootstrap Datepicker -->
<script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
datepicker-image
datepicker-image
Is there a way to fix this? Thanks in advance for the suggestions.
it seems to be some left padding on component. Find the source of this styling and overwrite it
.datepicker-inline class may includes some padding or width constaint or perhaps inherits it from some other class
I am working on a requirement where the input group contains two text-boxes separated by input-group-addon. The problem I am facing is I am not able to set the width of the text-boxes using bootstrap css. The first text-box should be wider than the second text-box.
JSFiddle: https://jsfiddle.net/Vimalan/5eqdkveb/3/
Current:
The textbox before and after delimiter are of same size.
Expected:
The textbox after delimiter should be small. I am more interested in a solution which uses bootstrap css and not custom css.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Approval Number</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" class="form-control input-sm" id="ApprovalNumberTextBox" />
<span class="input-group-addon">Delimiter</span>
<input type="text" class="form-control input-sm" id="ApprovalNumberDelimiterTextBox" />
</div>
</div>
</div>
</div>
I don't get why you are not able to set text-boxes width?!
You can simply add css rule to the input you want and set its width, like
<style>
#ApprovalNumberDelimiterTextBox {
width:40%;
}
</style>
and it is working Here or there is another problem I don't get?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I would like to know if its OK for me to include a header/s (h1) inside a form-group? I have added a simple form to the snippet for an example.
I am not super clear on if I can or cannot include it in this way? Just want to make sure I am doing it correctly.
The reason why I am doing it like this, is because the headers align perfectly flush with left-hand side of the form, otherwise nesting them outside the form-group makes them sit further to the left.
So, are they similar to the legend property in a form if I wish to use headers instead?
Cheers!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- 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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-12">
<form>
<div class="form-group">
<h1>Form details</h1>
<h4>Please fill out this form</h4>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
It's okay, but not good for SEO, you miss h2 and h3 header between your headers