I am trying to add the fa-icon as a button inside the input as you guys can see:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="input-group">
<textarea class="form-control custom-control" rows="2" style="border-radius: 3rem;"></textarea>
<span class=""> <i class="fa fa-comments fa-2x" style="padding-top: 5px; color: #18d26e;"></i></span>
<!-- or -->
<input class="form-control custom-control" rows="2" style="border-radius: 3rem;"></input>
<span class=""> <i class="fa fa-comments fa-2x" style="padding-top: 5px; color: #18d26e;"></i></span>
</div>
The question is how to add it as a button inside the input and also have other buttons inside same input? I would like to add and have functionality to also add more then 1 button inside, like left button , right button etc.
I also tried and added this example on jsfiddle https://jsfiddle.net/s7zLf0e1/
You can't place buttons within inputs. I would recommend that you style a div or form to look like the input field like so:
https://jsfiddle.net/mattclarke/wghr6xtn/3/
Markup:
<form class="m-5 border inline-block pr-3">
<input type="text" class="p-2" placeholder="Place text in here...">
<button class="bg-blue-500 text-white rounded-full px-1">
<i class="fas fa-plus"></i>
</button>
</form>
You will need to change the CSS to fit in with your site.
This keeps the desired effect of a button within the input, although it is not.
Related
I'm using bootstrap inside of my app on which I have a readonly input where I need to add checkmark inside of it. I tried to add simple <input readonly type="text" id="kyc_status" class="form-control" value="Success"> but this won't work. Below is my HTML structure:
<div class="card">
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col">
<label for="kyc_status" class="form-label">
KYC Status
</label>
<input readonly type="text" id="kyc_status" class="form-control" value="Success">
<i class="bi bi-check"></i>
</div>
</div>
</form>
</div>
</div>
So now it produces me:
How to put this checkmark inside of the input on the left ?
You can use .input-group and adjust styling of .input-group-text for your needs.
Below, I have added .border-end-0, .bg-transparent, and .pe-0 to the .input-group-text and .border-start-0 to the input.form-control.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<div class="card">
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col">
<label for="kyc_status" class="form-label">
KYC Status
</label>
<div class="input-group">
<span class="input-group-text border-end-0 bg-transparent pe-0"><i class="bi bi-check"></i></span>
<input readonly type="text" id="kyc_status" class="form-control border-start-0" value="Success">
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I put both in a div tag and then gave the position.
Note: I have given color, width and height to the icon tag so that it can be seen. For testing.
You can use the following code. The style is also written.
<div class="card">
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col">
<label for="kyc_status" class="form-label">
KYC Status
</label>
<div class="pos">
<input readonly type="text" id="kyc_status" class="form-control" value="Success">
<i class="bi bi-check"></i>
</div>
<style>
.pos {
position: relative;
}
.bi-check {
width: 5px;
height: 4px;
background: red;
position: absolute;
top: 50%;
left: 3px;
}
</style>
</div>
</div>
</form>
</div>
</div>
Exactly like this:
You can use position absolute property on checked icon and move it over the input field.
steps
wrap input element and icon tag in one division with style property positions relative.
then
for input use below property
padding-left 20px
then
for icon use below properties
position absolute
left 10px - adjust according your inputs field size
top 5px - adjust according your inputs field size
I added the bootstrap class to make image circle using the .rounded-circle class for image and for the buttons i tried using .rounded-pills class but nor is my picture becoming cirular and nor is button becoming pill shaped. i tried using the input tag too for the button but it isnt working.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row mt-2">
<div class="col-md-6">
<img src="123.jpg" class="rounded-circle mt-2" width="204" height="118">
<p class="p1">Sometext here <br/><span class="percent">90%</span> off <br/>
<button type="button" class="btn btn-primary btn-lg button1 rounded-pill"> Order Now <i class="bi bi-cart-fill i1"></i></button>
</p>
</div>
</div>
Button class and Ringing class both are working
I've tried several variations based on search results and StackOverflow results and referenced existing code.
With this code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="table-row row d-flex flex-column align-items-center">
<div class="col">
<span class="align-middle">
<button type="submit" class="searchbtn emailRemoveBtn float-start align-self-center" name="command" value="Delete email #i">
<i class="fa-solid fa-xmark sm"></i>
<span aria-hidden="true"></span>
</button>
<input readonly class="align-self-center" style="border-style: hidden;" />
</span>
</div>
</div>
The emails don't vertically center as shown here:
I'm new to this and it's probably something small. Do you see what I'm missing to center the emails vertically?
Don't use flexbox and floats together.
Don't use floats at all, except to wrap text around images. They're not for structural layout, just for content layout.
Don't introduce table row layout here (unless you actually have tabular data).
Don't use rows and explicit flex layout. Bootstrap 5 rows already have flexbox applied, but they require containers and columns, which you apparently don't need here, having only one column per row. You could apply the same principles to grid rows, though.
justify-content aligns content along the primary flex axis, not align-items.
Bootstrap provides border classes which you can use to remove border. Custom styles should be put on custom classes anyway, not in the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="d-flex flex-column justify-content-center mt-1 py-2 bg-secondary">
<div class="text-center">
<button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email #i">
<i class="fa-solid fa-xmark sm"></i>
<span aria-hidden="true"></span>
</button>
<input readonly class="align-self-center border-0" />
</div>
</div>
<div class="d-flex flex-column justify-content-center mt-1 py-2 bg-secondary">
<div class="text-center">
<button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email #i">
<i class="fa-solid fa-xmark sm"></i>
<span aria-hidden="true"></span>
</button>
<input readonly class="align-self-center border-0" />
</div>
</div>
I have a button with 1. an icon and 2. some normal text.
The problem is that the icon and the text are on different heights WITHIN the button. I thought something like this would work:
<div style="text-align: center;">
<button class="btn btn-outline-dark btn-lg">
<div class="row">
<i class="material-icons md-48">hourglass_full</i>
Some Text
</div>
</button>
</div>
it does work, but the w3c validator tells me, that
"Element div not allowed as child of element button in this context."
How are you supposed to align the elements within a button then? I didnt find a solution :S
Thanks for the help in advance!
You can take advantage of bootstrap classes, specifically flexbox
d-flex will make the button a flex box
align-items-center will center flex items vertically
Take a look
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="p-5">
<button class="btn btn-outline-dark btn-lg d-flex align-items-center m-auto">
<i class="material-icons md-48">hourglass_full</i>
<span class="ml-2">Some Text</span>
</button>
</div>
I am using Bootstrap 4 CSS and JS (from the official CDN), along with Font Awesome 5 (also official CDN).
I was originally using the text-center class from Bootstrap, since FA5 icons are just text. Then I tried using text-justify to make the icons dispersed better on larger-width displays, but this didn't work at all.
Here is the table cell part of the markup. I didn't want to paste the whole thing here because the templating (Jinja2) is fairly long.
<td>
<div class="container-fluid d-flex justify-content-between">
<i class="fas fa-fw fa-chevron-up"></i>
<i class="fas fa-fw fa-chevron-down"></i>
<i class="fas fa-fw fa-star"></i>
</div>
</td>
Table cell displays as expected except it is not full height and the icons look off-center.
Does anyone have a fairly simple way to make the d-flex element use the full height of the parent cell? Or just a better way in general to make up-vote, down-vote, and favorite icons fit well within a table cell? I also need to figure out a way to make the current scores / favorites number align well with all of the other cells in the table. Any existing solutions or advice you have would be very helpful as well.
Edit: As an afterthought, I should add that these icons will eventually be inside of buttons if that makes a difference.
Thanks.
Use align-items-center bootstrap class to align your elements center of the cell. If you used any custom line-height, Kindly remove it.
<td>
<div class="container-fluid d-flex justify-content-between align-items-center">
<i class="fas fa-fw fa-chevron-up"></i>
<i class="fas fa-fw fa-chevron-down"></i>
<i class="fas fa-fw fa-star"></i>
</div>
</td>
Note: The question was not clear to me. I gave the solution to align your fa icons vertically center to the cells. Hope u asking the same...
You say the icons will eventually be inside of buttons. Why not use a button group? Or use bootstraps col classes to align things. Set the height of the button 100% to take up the full height of the cell.
Both ideas shown below.
I hope this helps
td{
height: 100px;
}
.btn, .btn-group{
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>
<div>
<span class="col-sm-4">
<i class="fas fa-fw fa-chevron-up"></i>
</span>
<span class="col-sm-4">
<i class="fas fa-fw fa-chevron-down"></i>
</span>
<span class="col-sm-4">
<i class="fas fa-fw fa-star"></i>
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light">
<i class="fas fa-fw fa-chevron-up"></i>
</button>
<button type="button" class="btn btn-light">
<i class="fas fa-fw fa-chevron-down"></i>
</button>
<button type="button" class="btn btn-light">
<i class="fas fa-fw fa-star"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Why using .container-fluid with .d-flex? Use another parent tag for container-fluid class.