How to add small text under an input-group?

I am trying to add a small text under a input group. But it doesn't work as it works with form-group.

I am trying to add a small text under a input group. But it doesn't work as it works with form-group.

So in this example, I want help text to be below input, rather than being at the right of the input This is what I mean with input groupĀ https://getbootstrap.com/docs/4.0/components/input-group/

This is jsfiddle link to play on itĀ https://jsfiddle.net/c59hnx8v/

BTW this is just for demonstration.

<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container mt-3">
<form>
<div class="row">
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
</div>
</form>
</div>

</body>

</html>


Build a Register & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

Build a Register & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

In this tutorial you will learn and build a Responsive PHP Registration & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

Welcome to this video on Responsive PHP User Login and Registration Form with PHP and MySQL From Scratch. In this course you will Learn and build a Responsive PHP Registration & Login Form using PHP, HTML, CSS, Bootstrap and MySQL. After watching this course you will be able to Create your own registration form connected to the MySQL database. In this course will explain step by step from scratch how to build a login system that you can customize it. The course covers all the aspects of HTML, CSS, JavaScript, PHP, MySQL along with Bootstrap Framework to create a real-time registration form. Making a Super Simple Registration System With PHP and MySQL will be easy ans step by step process.

All Code of this video can be found here: https://github.com/pknowledge/useraccounts
https://github.com/pknowledge/userlogin

How To Make A Website Using HTML And CSS With 3D Effect Scrolling

How To Make A Website Using HTML And CSS With 3D Effect Scrolling

In this video tutorial you will learn to create a complete static website using HTML CSS and Bootstrap. We will use jQuery to add an awesome 3D scrolling effect on this website.

Learn How To Make A Complete Website Using HTML And CSS, HTML Website Design Tutorial Step By Step. Website Design With 3D effect.

In this video tutorial you will learn to create a complete static website using HTML CSS and Bootstrap. We will use jQuery to add an awesome 3D scrolling effect on this website.