Arranging Django/CSS Icon and form input within a single column

I'm struggling to display an icon from Font Awesome and a 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>

When using the code above, it appears as shown in the screenshot below: https://i.sstatic.net/Ydhsc.png

However, I want it to look like the image below:

https://i.sstatic.net/1KUie.png

Your assistance is greatly appreciated. Thank you.

cssbootstrap-4django-forms

Answer №1

Opting for flexbox over rows is a superior choice when it comes to handling boxes due to its increased alignment flexibility.

Feel free to experiment with the code snippet below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Parent whose height is less than that of the child element

I'm working on creating a side menu similar to the one on this website. However, I'm facing an issue with the height of the #parent list element. I want it to match the exact same height as its content (the #child span - check out this jsfiddle). ...

htmlcsspositionheighthtml-lists

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

What is the best way to implement a collapsible feature similar to Bootstrap within AMP?

Looking to implement a collapsible feature in AMP with a smooth animation similar to Bootstrap. While I can create a collapsible by toggling classes and adjusting height with CSS, the challenge lies in accommodating varying content heights without setting ...

twitter-bootstrapbootstrap-4twitter-bootstrap-3amp-html

What is the best way to place an element above another without disrupting the layout of the document?

I have a scenario where I am layering a black div on top of a red div using absolute positioning. Subsequently, additional content is displayed. p { position: relative; z-index; 10 } .wrapper { position: relative; } #red { height: 300px; w ...

htmlcss

The dimensions of the images in the Bootsrap carousel are fluctuating

Check out this carousel design with a login screen form here. The carousel in the link above is experiencing issues with changing sizes for each image. I've attempted to adjust the width and height of the carousel-inner, carousel, and img elements wi ...

htmlcsstwitter-bootstrap-3bootstrap-4carousel

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

javascriptc#jquerycssasp.net

applying custom font to select boxes in bootstrap

Trying to style the select option text using a Poppins font with the following class: .poppinsregular14diese00000061 { font-family: Poppins; font-weight: 400; font-size: 14px; color: #00000061; } You can view the implementation in this fi ...

cssbootstrap-4

Django form fails to display

Currently, I am in the process of developing a webpage that includes a form using Django's Form class. Despite consulting the Django documentation and Djangobook tutorial, I am unable to successfully display my Form on the page along with some sample ...

djangoformsdjango-formsdjango-cms

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

javascriptjqueryhtmlcss

The back div is not retained on the second animation when flipping the card

In my card with a unique animation, clicking on the "Edit" button triggers the following actions: It smoothly transitions to the center of the screen. During this movement, it rotates by 180 degrees, revealing a blank green back content. Once the card r ...

javascriptjqueryhtmlcssbootstrap-4

Top tips for effectively handling two CSS frameworks simultaneously within a project

In the midst of developing a Single Page Application (SPA) project, I am faced with the challenge of integrating two conflicting CSS frameworks: one that is considered "new and fresh" and another that is deemed "old and painful". The requirement is that ev ...

csstwitter-bootstrapwebcss-frameworkscascade-framework

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

javascriptjquerycss

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

htmlcss

Are error messages in Bootstrap/Django lacking the color red?

I decided to experiment with messages in my Django application. Everything seemed to be working fine with all message types except the error messages not displaying in red. https://i.sstatic.net/0MJFw.png My code is quite simple. views.py from django.c ...

djangobootstrap-4

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

javascriptcssbootstrap-4accordionsvg-transforms

Issue with Bootstrap DIV not extending to full height when applying background-color

I have encountered numerous posts on this topic, but none of the solutions provided have worked for me. I must admit that I struggle to grasp CSS concepts, although I am making an effort to learn. Here is the code I am currently using: <!DOCTYPE html& ...

htmlcssbootstrap-4

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

cssvue.jssass

What are the steps to create a vertical split screen using two div elements?

I am attempting to create a split page layout using html and css, but the elements are stacking on top of each other instead of side by side. @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800'); @media (min-width: 5 ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Modify the color of the lower border and dropdown indicator in Material UI's Autocomplete feature

https://i.stack.imgur.com/oXKQm.png I'm struggling to figure out how to change the color of the line underneath 'Search' and the arrow on the right to white. I've tried applying styles to the .MuiAutocomplete-root css class, but it did ...

cssreactjsmaterial-ui