I want to align my two icons left and right next to my toggle switch. But I just cant find a way to make it work.
<div class="d-flex">
<div class="form-check form-switch">
<label class="form-check-label ms-3" for="lightSwitch" fill="currentColor">
<i class="bi bi-brightness-high-fill"></i>
</label>
<input class="form-check-input bg-dark border border-secondary" type="checkbox" id="lightSwitch" />
<label class="form-check-label ms-3" for="lightSwitch" fill="currentColor">
<i class="bi bi-moon-fill"></i>
</label>
</div>
</div>
using style="float: left;" is not fixing my issue because they are overlapping themselfes.
any help? thanks!
The tricks here are
remove the padding:2.5em within the .form-switch (optional)
remove the margin-left: -2.5em; within the .form-check .form-check-input (important)
remove the float:left; within the .form-check .form-check-input (important)
There are two approach to achieve that :
using d-flex on .form-switch (Approach 1)
using float-none on .form-check-input (Approach 2)
.form-switch .form-check-input:checked {
background-color: #000000;
border-color: #000000;
}
.form-switch .form-check-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") !important;
}
.form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") !important;
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<h5>Approach 1</h5>
<div class="form-check form-switch d-flex ps-0">
<i class="bi bi-brightness-high-fill me-3"></i>
<input class="form-check-input ms-0 me-3" type="checkbox" id="flexSwitchCheckDefault">
<i class="bi bi-moon-fill"></i>
</div>
<h5>Approach 2</h5>
<div class="form-check form-switch ps-0">
<i class="bi bi-brightness-high-fill me-3"></i>
<input class="form-check-input ms-0 float-none me-3" type="checkbox" id="flexSwitchCheckDefault">
<i class="bi bi-moon-fill"></i>
</div>
I added bootstrap icon cdn link between head tags and some css code .Result is like below. If you want to do icons closer to the switch you can remove float-end class
.form-switch .form-check-input:checked {
background-color: #000000;
border-color: #000000;
}
.form-switch .form-check-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") !important;
}
.form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") !important;
}
<!DOCTYPE html>
<html lang="tr">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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-icons#1.5.0/font/bootstrap-icons.css">
</head>
<body>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<i class="bi bi-brightness-high-fill float-end me-3"></i>
<i class="bi bi-moon-fill float-end me-3"></i>
</div>
</body>
</html>
Related
Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!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" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
This question already has answers here:
CSS for hover that includes all child elements
(4 answers)
Closed last year.
I have a div, which has a CSS that changes the background and cursor when hovered over. However within that div are a checkbox with a label. Once hovering over either of those, the background remains changed, but the cursor returns to default. How do I fix this?
.item:hover
{
background-color: #e4e8eb;
border-radius: 10px;
cursor: pointer !important;
}
<!-- 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">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="row form-check item fg_item fg_item_0" onclick="fachgebiet('edit', 0)">
<div class="col-md-10 mb-0">
<input name="fachgebiete[0][id]" value="1" class="form-check-input fg_item_0 fg_id" id="fg_item_0" type="checkbox">
<label class="form-check-label">Fachbereich A</label>
</div>
<div class="col-md-2 mb-0">
<button type="button" class="btn btn-danger" onclick="fachgebiet('del', 0)"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
.item:hover {
background-color: #e4e8eb;
border-radius: 10px;
}
.item *:hover {
cursor: pointer;
}
If you want to change you cursor to "pointer", when you hover over you checkbox or label. Then you should add hover style on input and label in css. After doing this you code will looks like this.
.item:hover,
input.form-check-input,
label.form-check-label {
background-color: #e4e8eb;
border-radius: 10px;
cursor: pointer;
}
i deleted the <input name="fachgebiete[0][id]" value="1" class="form-check-input fg_item_0 fg_id" id="fg_item_0" type="checkbox"> <label class="form-check-label">Fachbereich A</label> codes . instead, I added the following codes below and got this result. I hope it works for you.
.item:hover {
background-color: #e4e8eb;
border-radius: 10px;
cursor: pointer;
}
.cursor {
cursor: pointer;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="row form-check item fg_item fg_item_0" onclick="fachgebiet('edit', 0)">
<div class="col-md-10 mb-0">
<input type="checkbox" class="cursor" style="margin-left: 15px; margin-top:7px;"> Fachbereich A <br>
</div>
<div class="col-md-2 mb-0">
<button type="button" class="btn btn-danger" onclick="fachgebiet('del', 0)"><i class="fa fa-minus"
aria-hidden="true"></i></button>
</div>
</div>
I am a beginner at bootstrap 4. I want to change the background of this card image. But my CSS is not working. What could be the problem here? I have tried so many ways but could not find any solution. Please help me.
Here is my index.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChessStation</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row text-center py-5">
<div class="col-md-3 col-sm-6 my-3 my-md-0">
<form action="index.php" method="post">
<div class="card shadow">
<div>
<img src="./img/p1.jpg" alt="image1" class="img-fluid card-img-top">
</div>
<div class="card-body">
<h5 class="card-title">Product1</h5>
<h6>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star-half"></i>
</h6>
<p class="card-text">
some quick example text to build on the card
</p>
<h5>
<span class="price">1000BDT</span>
</h5>
<button type="submit" class="btn btn-warning my-3" name="add">Add to Cart <i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-3 col-sm-6 my-3 my-md-0">
</div>
<div class="col-md-3 col-sm-6 my-3 my-md-0">
</div>
<div class="col-md-3 col-sm-6 my-3 my-md-0">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
And my style.CSS file:
img{
max-width: 100%;
height: auto;
background-color: lightblue;
background-color: radial-gradient(white 30%, lightblue 70%) ;
}
.fa-star,
.fa-star-half{
color: yellow;
}
background-color will not work on img unless the image is .png or .svg (etc) but not .jpg.
I'm not really sure which card do you want the color to be added, but I assume it should be under card-body. So in your css just do:
.card-body {
max-width: 100%;
height: auto;
background-color: lightblue;
background-color: radial-gradient(white 30%, lightblue 70%) ;
}
You cannot give an image a background color unless it's background is transparent.
Full Code: https://codesandbox.io/s/strange-cohen-q64pw?file=/style.css
In this code i have used a bag PNG image with transparent background and your style is now visible in the background.
Give it a try. PNG Image Link with transparent background.
https://freepngimg.com/thumb/gloves/55145-4-school-bag-free-transparent-image-hd.png
I have the folowing code that renders different from what I was expecting when you add the form tag.
Try removing the form tags to see the difference.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
With form tag
Without form tag
I want it to look like the second picture, but dont know why the form tag changes the alignment.
Your form tag should has a col-sm-12 class
<form action="" class="col-sm-12">
...
</form>
Change your form code with following code :
<form action="" class="col-sm-12">
<div class="row">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</div>
</form>
Align it and you should use col class only inside row class.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="" class="w-100">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control border-0" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Try this structure. It will easy for you.
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<div class="fondo d-flex justify-content-center align-items-center flex-column">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</body>
</html>
I am looking for a solution to create and input like this one in bootstrap 4
I am using font awesome and this is the code that I use
<div class="input-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<span>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
</div>
but i get the image out of the input
Any help please
https://jsfiddle.net/5db2ho62/
here is the solution
span{
position: absolute;
margin-left: 5px;
height: 25px;
display: flex;
align-items: center;
}
input{
padding-left: 25px;
height: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
<span>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
here is the working fiddle
.main {
width: 50%;
margin: 50px auto;
}
.form-group .form-control {
padding-left: 2.375rem;
}
.form-group .form-control-icon {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
<link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="main">
<div class="form-group">
<span class="fa fa-search form-control-icon"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
Try it!
You don't need to have the icon inside the input- you can place it next to the input field, and remove the input field's border using CSS.
HTML:
<div class="input-group">
<i class="fa fa-user-circle-o"></i>
<input type="text" class="form-control" placeholder="Enter Name Here" >
</div>
CSS:
input{
border:none;
background-color: transparent;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.fa-user-circle-o{
color: gray;
}
Updated fiddle:
https://jsfiddle.net/5db2ho62/2/
This method seems to be the cleanest. You do not need to add any custom CSS. You can do the following all with Bootstrap:
$(document).ready(function() {
$('.input-focus').on('click', function() {
$(this).children('input').focus();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group input-focus">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
</div>
<input type="search" placeholder="Search" class="form-control border-left-0">
</div>
See the bootstrap 4 documentation for more details on how you can manipulate the placement and styling of the input icon:
https://getbootstrap.com/docs/4.0/components/input-group/
UPDATE:
I added a small jQuery snippet to focus the input when the search icon is clicked, per a suggestion to this answer in the comments. The JavaScript snippet and jQuery library script inclusion are not requirements for the icon to appear and work properly, but they do help with UX.
The solution is maybe to use unicode in placeholder.
Here the cheatsheet for all font awesome unicode http://fontawesome.io/cheatsheet/
input {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder=" Username" />
</div>
Use the following code no CSS required.
<div class="d-flex align-items-center small">
<i class="fa fa-search fa-fw text-muted position-absolute pl-3"></i>
<input type="text" class="form-control py-4" placeholder="Search..." style="padding-left: 38px;"/>
</div>
Tested with Bootstrap 4.
Take a form-control, and add is-valid to its class. Notice how the control turns green, but more importantly, notice the checkmark icon on the right of the control? This is what we want!
Example:
.my-icon {
padding-right: calc(1.5em + .75rem);
background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-5">
<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js " integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="col-sm-4 input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-search"></i>
</div>
</div>
<input type="text" class="form-control">
</div>
</body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
see bootstrap From
Hope this will help.
You don't need to type custom CSS code. Works great on Bootstrap 5. Don't forget to add font-awesome.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
...
<div class="input-group">
<span class="input-group-text fa fa-user-circle-o form-control-icon"></span>
<input type="text" name="name" class="form-control">
</div>
Putting the icon inside the text area isn't a nice solution to this. The best way is to create a simple workaround. So first we'll create a form with the icon before the input field like below:
input {
border: none;
background-color: white;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Please enter your name" >
</div>
See jsfiddle
Next up with some styling we'll make some changes so that it looks like it's one input field:
input {
border: none;
background-color: transparent;
}
.fa-user {
padding: 10px;
}
.input-group {
border: 1px solid black;
width: 250px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Please enter your name" >
</div>
see jsfiddle
Hope this helps!
Here is the easiest method
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js " integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="col-sm-4 input-group">
<div class="input-group-prepend">
<div class="input-group-text" style="border-right:none;background:transparent">
<i class="fa fa-user"></i>
</div>
</div>
<input type="text" class="form-control" style="border-left:none">
</div>
</body>