Django/CSS Icon and form input in same column

user_16814329 0
Viewed 14

I am having a problem putting icon from font awesome and form input in the same column.

<div class="form-group">
   <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form.media }}
      <div class="row pt-3">
         <i class="fa fa-user fa-lg">{{ form.username }}</i>
      </div>
   </form>
</div>

With the code above, it looks a screenshot bellow: how it looks like now

I would like to look like the image bellow:

what I would like

Thank you for your help.

bootstrap-4 django-forms css
1 Answers

It's better to deal with boxes with flexbox rather than row for more alignment flexibility.

Try the following code

<div class="form-group">
   <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form.media }}
      <div class="d-flex pt-3">
         <i class="fa fa-user fa-lg mr-2 "></i>{{ form.username }}
      </div>
   </form>
</div>
user_163317150
Related