Reputation: 127
How to pass my submit button in one row with inputtext, that submit will be on the right side of the inputtext?
my code:
<div class="mt-12">
<input
id="grid-text"
type="text"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
placeholder="email"
/>
<a
href="#"
class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
>
Run!
</a>
</div>
Upvotes: 0
Views: 27
Reputation: 1689
there are multiple ways to achieve that. Your HTML alone (without CSS) would be rendered as a single row - because input is an inline-block tag and the anchor is an inline tag. However, something in your CSS is probably changing one of the two element's display property.
We could try to override this behaviour with flex from the parent element
mt-12 {
display: flex;
align-items: center; // only to make sure they look nice and centered
}
or simply making sure that the display property of both elements are display:
input, a {
display: inline-block; // or inline, depending on your needs
}
Be careful that it seems that you are using helper classes, some helper classes (e.g. Boostrap helper classes) might have properties set with the !important flag hence hard to override. In that case it's better to just remove those un-wanted helper classes. You could also override the helper classes by setting the !important flag in your class too and have an higher CSS specificity - but that is a bad approach.
Upvotes: 0
Reputation: 525
You can use Input-Groups.
something like that:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
Upvotes: 1