Hi I am trying to put captcha image as an input group item in a Bootstrap 4 form. it's working but it shows an border around the image and making the input field larger than the other ones and i don't want that to happen, here is the code and i am attaching a picture too. thanks in advance.

<fieldset class="form-group">
    Captcha
    <div class="input-group">
    <img class="input-group-addon img-fluid" src="<?php LinkGen::getLink("captcha.php"); ?>" style="margin:0;">
    <input type="text" class="form-control" id="AntiSpamImage" name="AntiSpamImage" autocomplete="off" required />
    </div>
</fieldset>

upvote
  flag
Could you please share the custom CSS involved? – Jordi Nebot
upvote
  flag
I didn't used any custom CSS yet. – Mohammed Sharfuddin Shawon

1 Answers 11

up vote 2 down vote accepted

Add the classes p-0 and m-0 to your captcha image.

Like so:

<fieldset class="form-group">
    Captcha
    <div class="input-group">
    <img class="input-group-addon img-fluid p-0 m-0" src="<?php LinkGen::getLink("captcha.php"); ?>">
    <input type="text" class="form-control" id="AntiSpamImage" name="AntiSpamImage" autocomplete="off" required />
    </div>
</fieldset>

Those are native Bootstrap 4 classes for removing padding and margin. No css hacks needed.

upvote
  flag
Thanks man! worked like a charm! – Mohammed Sharfuddin Shawon

Not the answer you're looking for? Browse other questions tagged or ask your own question.