Style Django Forms With Bootstrap - Django Blog #5
ฝัง
- เผยแพร่เมื่อ 24 ส.ค. 2024
- In this video I'll show you how to Style a Django Form with Bootstrap.
In the last video (check the playlist in the comments below) we create a form for our blog Post model. But the form didn't have any css styling to make it look good. And since the form was generated automatically with the Django form.as_p tag, we couldn't add any of our own css.
Well actually we can, by creating a form on the backend using a forms.py file and adding widgets to the form that we can then use to import our Bootstrap form-control css.
![ทางเดินชีวิต - ธีเดช ทองอภิชาติ x อ.ไข่ มาลีฮวนน่า [Official MV]](http://i.ytimg.com/vi/1f3wcG16dd4/mqdefault.jpg)
▶️ Watch Entire Django Blog Playlist ✅ Subscribe To My TH-cam Channel:
bit.ly/3bWN6wj bit.ly/2IGzvOR
▶️ See More At: ✅ Join My Facebook Group:
Codemy.com bit.ly/2GFmOBz
▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt!
Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN
idn't know about the "form.as_p" vs "form.as_ul" ... "form.as_table" . These little details I keep finding in your videos are great.
Mr whithe has shown me more in programming than many courses
I was really confused on applying django in real world projrcts. Now that I see your videos I have cleared all my doubts and understood everything :) Really thanks a lot sir
Awesome!
a person is known by not how much he does but how well he does..you are the man and thankyou... you deserve a salute
Thanks!
I always wait for "do smash like button below" , that sounds very funny af
ha
Eres increíble, a pesar que no comprendo muy bien el inglés se te entiende a la perfección. Gracias
Thank you!
u have teached me something that every page tried to do with plugins or external libraries, thank you very much
Very welcome
I was struggling with this for days. Thanks for the great video.
At 15:16 you show model = Post, form_class = PostForm and template_name= 'add_post.html' but these are not used by anything. Also Following this example I keep getting an error: got an unexpected keyword argument 'attrs' when I specify the widgets
Thanks a million... you the best !....my one stop for all my coding all day every day...i have really learnt a lot
Happy to hear it!
Say John.... We're on Video 5 now and I've noticed that you haven't placed a tag yet. Just curious as to why that is? It's not like anything has changed with functionality - just something I've noticed over these.
just a typo...it should be there...but obviously still works without it ;-)
You and moshhamidani is my best teachers live long
thanks!
i just love this man, my code crashed and i could not do anything about it. but its working
thanks 🙂
@@Codemycom I'm trying to make the post display horizontal, 3 per line
Do you have a video on that
@@Chibudomobasi no, but it's just a matter of changing the html
@@Codemycom I've tried flex, but it's just a straight line.
I'm lost
@@Chibudomobasi looks like you need a course in using bootstrap.
Great video! It would be better if you mentioned that it is not a mandatory to use 'Meta' and class-based views. I think a lot of newbies watch the video and they may be a little confused about that as I was in my time
This is AMAIZING !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thanks!
I did everything in this video however the form is not styled with bootstrap no matter how many times i refresh the browser
restart your server...if that doesn't work, you did something wrong
Looks like this form on 'Add post' just doesn't want to respond to any changes...
@@EMI42 what did you do differently from the video?
I had same problem. In file "forms.py", change "forms.widgets" to "widgets", if you have that. My VS CODE do auto replacement, if you type "widgets" and press . I hate that...😒
@@user-zr2vq8hd5b one of many reasons why I don't recommend VS Code
you are the best, im going to gift your course to my brother (y)
Awesome!
Thank you, it's really very well presented.
muchas gracias Mr. White
Ha welcome
great video thank you
welcome
Awesome tutorial!! Really thanks!!!
Thanks for watching!
thanks this was helpful!!!
Glad it helped!
Do you or anyone else on here know how to add a class to the label of the element? We can add a class to the input control easy enough but what about the label?
did you find the solution?
cool big brother i saw lots of django tutorial never find a forms.py file and how u just grave the admin form in webpage by form.as_p stuff was awesome
Glad you liked it!
Great content, thank you, sir.
welcome
Awesome tutorial!
Thanks!
Thanks I was looking for this
Sure thing!
Awesome video. It helped me a lot!
Glad it helped!
Thanks a lot Sir
Very Welcome!
Great tutorial there
Thanks! Glad you liked it.
Thanks for the video =)
Welcome!
teşekkürler Thanks
Forinstance if I want to take the author as textinput from the user but however keep it as foreign key in my model, is that possible? . I don't want the author to be a selection even though django automatically make foreignkey in models as selection. How do I work around this, any help
Do you have an example to add bootstrap to a fileinput?
Awesome as always 👍😀
Thanks!
Hey there, awesome tutorial. Question, are the forms responsive, for mobile devices? In your tutorial, the boxes stretched across the screen, will they do that on phones as well? Or will extra bootstrapping be needed? Thanks!
You can use additional bootstrap to make it responsive. Look up rows and columns in bootstrap.
Yeah it looks same in mobile as well
@@danieldasent-thomson5727 But Bootstrap always do it by default that is a feature of Bootstrap
Every happen same but when I click on post nothing post not upload no errors show please please help me
Retrace your steps, there are errors in your code.
Awesome
Thanks
Obrigado!
I've got a problem with some error about no being able to find the '_curses' module, i solved it by installing with the pip install, the command is " pip install windows-curses".
Reverse for 'home' with arguments '('2', '6')' not found. 1 pattern(s) tried: ['$']
can anyone tell me why this error is happening? Sometime it was working fine :(
@@willbr2kgmailcom Thanks a lot for helping sir 😁
Thanks for the tip
Sure thing
great content
Thanks!
Hey can you tell me how to style the login page? I have created a Custom user using AbstractUser?. Please help me anyone?
Is there a way to write the css on the frontend here ? Styling in .py files is very weird to me.
Anyway thank you so much for showing this.
Maybe you can pass a class tag and then use it in your .css files?
in the forms :form.TextInput(attrs={'class':'form_control'}),
Where did you get the form its not imported above so im confused
Guys, can you explain to me, how to make a form render as real table (like it's inside table tag, with borders etc)
I tried as_table but it renders more like inline, not a table. Tries crispy_forms but it makes a mess for me..
Hi, im trying to style a django form for an AbstracUser model. So far I have been able to apply the class to the username, the password and the profile image fields, but when I try to apply it to the confirmation field it doesnt work. Can anyone help me please?
How could we replicate this but for a filter using django_filters.FilterSet ? I tried adding widgets and the div but it didnt work :(
my IDE cannot find form in widgets. Should I import it from anywhere?
Just follow the directions in the video. I don't recommend other IDE's.
How do you send data from 3 different forms on the same page to the database
Seriously?
What an ugly way Django manages this issue.
Thanks for all!
How can we get a placeholder on that dropdown list?
inspite of getting author as dropdown how can we get name of author who is redirected to this page after login plz help
thank you very match
You're very welcome!
It's friday every day here and I'm not even in Vegas.
Ha!
Great explanation,
Would you mind share video links of how to get data from HTML form and also for updating, instead of we using {{ form.as_p }}
Thank you once again
For loop as you normally do to get data from database and use {{form.title}}
Hey. One request. Would be awesome if you could replace the body textarea with a wysiwyg editor for django. Would be cool to able to format the texts, init?
That's not a bad idea...
@@Codemycom ...So, I guess you might implement that in future videos?
@@brucebatmanwayne8514 Planning on it
@@Codemycom That's great! Thank you :D
@@brucebatmanwayne8514 Sure thing!
view.py
class AddPostView(CreateView):
#fields = '__all__'
an error occurs
Using ModelFormMixin (base class of AddPostView) without the 'fields' attribute is prohibited.
why???
hello, I have a same problem. Did you find any solution?
great.. keep it up :)
Thanks :-)
Walter White is cooking...
lol
sir every thing working fine till two or three posts after that it shows an error in redirection no reverse match
Solved?
Sir, please make tutorials on custom form wizard
This video is about custom forms for the blog, I don't know what custom form wizard is
what when you use the auth forms from django itself? how can you style those?
I have videos on that somewhere
👍👍👍
:-)
thanks
You're welcome...thanks for watching!
It doesn't know the name 'form' and always showing name error but i put 's' in form it's work just like(forms.TextInput())
weird
@@Codemycom Yeah :3
how can we add 2 bootstrap ex form-control and col-md-3 thanks
'class': 'form-control col-md-3'
i dint know Walter White taught programming as well
Ha!
What about functions based views?
I have lots of courses on that at Codemy.com
Improperly configured both 'fields' and 'form_class' is not permitted. ;…....... Errror 🙄
hello , I'm applying styling to {{form.as_p}} but its not working i have also created base.html file someone please guide me ?
What did you do differently from the video?
@@robbyz512 glad you got it sorted
@@robbyz512 man thank you so much. I was having a hard time figuring it out. You saved me. Have a nice day :)
boostrap needs to be installed?
No
How to CRUD by mysql with Django?
This is all crud in these videos. Nothing changes because of mysql, just add it to your settings.py file
I paid close to 10 grand for a coding boot camp yet keep finding myself using your videos instead of theirs.
Ha awesome... fee free to buy me a beer or 10 ;-)
hi! great video! do these still apply for bootstrap 5?
of course
Is the meta class creation is necessary sir??
I wouldn't do it if it wasn't.
The style of the form does not apply, can you help me please.
did you add bootstrap ?
@@jishnugnanadas8312 where?
@@maihuire11 getbootstrap.com/docs/4.0/getting-started/introduction/
@@jishnugnanadas8312 yes i make it
In my case , I had a wrong syntax in forms.py -> widget instead widgets
Why not just use {% bootstrap_form form %} in the HTML file?
We haven't installed that
In thumbnail it's written bootstap which should be bootstrap
Good catch!
can you show us how we can use creating models forms in forms.py
That's what this video shows you...
assert( (this, is, a, tuple) != [this, is, a, list] )
at 12:57 I get CSRF verification failed :s
Did you forget to add {% csrf_token %}
11:01
There is nothing about bootstrap
pay closer attention, we added a class of form-control. That's pure bootstrap.
what if we want to do the same with forms instead of a model?