Issue
Could someone please help me with this, I'm trying to create the following:
With the below code:
<header>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</header>
<body>
<div class="d-flex flex-row mb-3" style="padding-left: 11rem;">
<div class="p-2"> <input type="text" class="form-control" placeholder="¿Que Buscas?"> </div>
<div class="p-2"> <input type="text" class="form-control" placeholder="Ciudad"> </div>
<div class="p-2"> <button type="button" class="btn bg-danger text-white">Buscar</button> </div>
</div>
</body>I´ve ben trying to create this by using BootStrap´s classes.
Solution
Here is an example that you can use as a basis.
You can try to play with the borders of your 2 inputs. (border-left / border-right). You should also modify the border-radius of these two inputs.
With this, it will form a single input.
As for putting icons or buttons in the input, you can use the relative/absolute positions.
Now it's up to you to modify it (like modifying the shadow boxes, input focus, adding your other icons, ...) and to adapt it according to your needs.
<!DOCTYPE html>
<html lang="en">
<header>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style lang="scss">
.buscando {
border-right-color: white;
border-radius: 0.25rem 0px 0px 0.25rem;
margin-right: -2px
}
.ciudad {
border-left-color: white;
border-radius: 0px 0.25rem 0.25rem 0px;
margin-left: -5px
}
button {
top: 0;
right: 0;
}
</style>
</header>
<body>
<div class="d-flex justify-content-center m-2">
<div>
<input
type="text"
class="form-control buscando shadow-none focus-none"
placeholder="¿Que Buscas?"
/>
</div>
<div class='position-relative'>
<input
type="text"
class="form-control ciudad shadow-none "
placeholder="Ciudad"
>
</input>
<button
type="button"
class="btn bg-danger text-white position-absolute"
>
Buscar
</button>
</div>
</body>
</html>Answered By - Asmoth Answer Checked By - Mildred Charles (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.