Тёмный

Style Django Forms With Bootstrap - Django Blog #5 

Codemy.com
Подписаться 227 тыс.
Просмотров 123 тыс.
50% 1

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.

Опубликовано:

 

9 апр 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 176   
@Codemycom
@Codemycom 4 года назад
▶️ Watch Entire Django Blog Playlist ✅ Subscribe To My RU-vid 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
@anthonygrear6226
@anthonygrear6226 3 года назад
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.
@ambientsoundsfromtheotherside
@ambientsoundsfromtheotherside 8 месяцев назад
Mr whithe has shown me more in programming than many courses
@mahirrahman3363
@mahirrahman3363 Год назад
I was struggling with this for days. Thanks for the great video.
@viveksharmapoudel1657
@viveksharmapoudel1657 3 года назад
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
@Codemycom
@Codemycom 3 года назад
Thanks!
@rickkerpvtltd1946
@rickkerpvtltd1946 3 года назад
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
@Codemycom
@Codemycom 3 года назад
Awesome!
@gabrieldiazandrade9564
@gabrieldiazandrade9564 3 года назад
Eres increíble, a pesar que no comprendo muy bien el inglés se te entiende a la perfección. Gracias
@Codemycom
@Codemycom 3 года назад
Thank you!
@laidifoughali8606
@laidifoughali8606 Год назад
Thank you, it's really very well presented.
@micaelmoscoso6446
@micaelmoscoso6446 3 года назад
u have teached me something that every page tried to do with plugins or external libraries, thank you very much
@Codemycom
@Codemycom 3 года назад
Very welcome
@user-xm1mr6dz6j
@user-xm1mr6dz6j 2 года назад
Awesome tutorial!! Really thanks!!!
@Codemycom
@Codemycom 2 года назад
Thanks for watching!
@work9167
@work9167 2 года назад
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
@santiagomontoyas2020
@santiagomontoyas2020 3 года назад
Awesome video. It helped me a lot!
@Codemycom
@Codemycom 3 года назад
Glad it helped!
@mohit_shende
@mohit_shende 4 года назад
Thanks I was looking for this
@Codemycom
@Codemycom 4 года назад
Sure thing!
@brettgastelum5330
@brettgastelum5330 4 года назад
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.
@Codemycom
@Codemycom 4 года назад
just a typo...it should be there...but obviously still works without it ;-)
@steven1146
@steven1146 6 месяцев назад
Great content, thank you, sir.
@Codemycom
@Codemycom 6 месяцев назад
welcome
@aashishrahate3066
@aashishrahate3066 3 года назад
thanks this was helpful!!!
@Codemycom
@Codemycom 3 года назад
Glad it helped!
@beckett1458
@beckett1458 3 года назад
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
@joaovictorteodorobrasil1435
@joaovictorteodorobrasil1435 2 года назад
Awesome tutorial!
@Codemycom
@Codemycom 2 года назад
Thanks!
@George-Ndichu
@George-Ndichu 2 года назад
Thanks a million... you the best !....my one stop for all my coding all day every day...i have really learnt a lot
@Codemycom
@Codemycom 2 года назад
Happy to hear it!
@jansafar5371
@jansafar5371 Год назад
you are the best, im going to gift your course to my brother (y)
@Codemycom
@Codemycom Год назад
Awesome!
@rangabharath4253
@rangabharath4253 4 года назад
Awesome as always 👍😀
@Codemycom
@Codemycom 4 года назад
Thanks!
@amanihrd7609
@amanihrd7609 2 месяца назад
great video thank you
@Codemycom
@Codemycom 2 месяца назад
welcome
@pauwelsgnanih7136
@pauwelsgnanih7136 10 месяцев назад
This is AMAIZING !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@Codemycom
@Codemycom 10 месяцев назад
Thanks!
@OthmanAlikhan
@OthmanAlikhan 2 года назад
Thanks for the video =)
@JohnElder
@JohnElder 2 года назад
Welcome!
@eennavrublevska2709
@eennavrublevska2709 4 года назад
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!
@danieldasent-thomson5727
@danieldasent-thomson5727 4 года назад
You can use additional bootstrap to make it responsive. Look up rows and columns in bootstrap.
@mokshitsarma378
@mokshitsarma378 2 года назад
Yeah it looks same in mobile as well
@mokshitsarma378
@mokshitsarma378 2 года назад
@@danieldasent-thomson5727 But Bootstrap always do it by default that is a feature of Bootstrap
@Vjgalaxy
@Vjgalaxy 4 года назад
Thanks for the tip
@Codemycom
@Codemycom 4 года назад
Sure thing
@groenekool
@groenekool 3 года назад
Do you have an example to add bootstrap to a fileinput?
@mr_yoshidasan
@mr_yoshidasan 2 месяца назад
muchas gracias Mr. White
@Codemycom
@Codemycom 2 месяца назад
Ha welcome
@arunsharma8740
@arunsharma8740 Год назад
Great tutorial there
@Codemycom
@Codemycom Год назад
Thanks! Glad you liked it.
@alvarochimeno2274
@alvarochimeno2274 3 года назад
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?
@Chibudomobasi
@Chibudomobasi Год назад
i just love this man, my code crashed and i could not do anything about it. but its working
@Codemycom
@Codemycom Год назад
thanks 🙂
@Chibudomobasi
@Chibudomobasi Год назад
@@Codemycom I'm trying to make the post display horizontal, 3 per line Do you have a video on that
@Codemycom
@Codemycom Год назад
@@Chibudomobasi no, but it's just a matter of changing the html
@Chibudomobasi
@Chibudomobasi Год назад
@@Codemycom I've tried flex, but it's just a straight line. I'm lost
@Codemycom
@Codemycom Год назад
@@Chibudomobasi looks like you need a course in using bootstrap.
@rodrigosegura2400
@rodrigosegura2400 3 года назад
How could we replicate this but for a filter using django_filters.FilterSet ? I tried adding widgets and the div but it didnt work :(
@zolintertainment2935
@zolintertainment2935 Год назад
Thank you so much! I want to use my time picker in the form any help pls?
@memes6587
@memes6587 3 года назад
in the forms :form.TextInput(attrs={'class':'form_control'}), Where did you get the form its not imported above so im confused
@PranavPRaj
@PranavPRaj 2 года назад
Awesome
@Codemycom
@Codemycom 2 года назад
Thanks
@manikantapunnam1189
@manikantapunnam1189 2 года назад
Thanks a lot Sir
@Codemycom
@Codemycom 2 года назад
Very Welcome!
@albertprincemensah3679
@albertprincemensah3679 3 года назад
How do you send data from 3 different forms on the same page to the database
@arjavsethics4339
@arjavsethics4339 3 года назад
great content
@Codemycom
@Codemycom 3 года назад
Thanks!
@vishalmishra1937
@vishalmishra1937 3 года назад
inspite of getting author as dropdown how can we get name of author who is redirected to this page after login plz help
@acarlos290965
@acarlos290965 Год назад
Obrigado!
@tasniasharmin7701
@tasniasharmin7701 3 года назад
great.. keep it up :)
@Codemycom
@Codemycom 3 года назад
Thanks :-)
@bostankhan2396
@bostankhan2396 3 года назад
You and moshhamidani is my best teachers live long
@Codemycom
@Codemycom 3 года назад
thanks!
@danielayuch5498
@danielayuch5498 2 года назад
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".
@nikitakuznetsov4592
@nikitakuznetsov4592 Год назад
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..
@subhankarjadab7617
@subhankarjadab7617 8 месяцев назад
I always wait for "do smash like button below" , that sounds very funny af
@Codemycom
@Codemycom 8 месяцев назад
ha
@torjegarnes8269
@torjegarnes8269 3 года назад
How can we get a placeholder on that dropdown list?
@mohemmedkamal
@mohemmedkamal 3 года назад
thank you very match
@Codemycom
@Codemycom 3 года назад
You're very welcome!
@josef2577
@josef2577 3 года назад
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.
@user-wz1du3hk2m
@user-wz1du3hk2m 3 года назад
Maybe you can pass a class tag and then use it in your .css files?
@gankers6746
@gankers6746 2 года назад
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
@Codemycom
@Codemycom 2 года назад
Glad you liked it!
@dankwabismark2598
@dankwabismark2598 Год назад
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
@brucebatmanwayne8514
@brucebatmanwayne8514 4 года назад
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?
@Codemycom
@Codemycom 4 года назад
That's not a bad idea...
@brucebatmanwayne8514
@brucebatmanwayne8514 4 года назад
@@Codemycom ...So, I guess you might implement that in future videos?
@Codemycom
@Codemycom 4 года назад
@@brucebatmanwayne8514 Planning on it
@brucebatmanwayne8514
@brucebatmanwayne8514 4 года назад
@@Codemycom That's great! Thank you :D
@Codemycom
@Codemycom 4 года назад
@@brucebatmanwayne8514 Sure thing!
@immanuelnjuguna5381
@immanuelnjuguna5381 2 года назад
I did everything in this video however the form is not styled with bootstrap no matter how many times i refresh the browser
@Codemycom
@Codemycom 2 года назад
restart your server...if that doesn't work, you did something wrong
@EMI42
@EMI42 2 года назад
Looks like this form on 'Add post' just doesn't want to respond to any changes...
@Codemycom
@Codemycom 2 года назад
@@EMI42 what did you do differently from the video?
@user-zr2vq8hd5b
@user-zr2vq8hd5b 2 года назад
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...😒
@Codemycom
@Codemycom 2 года назад
@@user-zr2vq8hd5b one of many reasons why I don't recommend VS Code
@mubasherrehman3074
@mubasherrehman3074 3 года назад
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
@musabmohammed7973
@musabmohammed7973 3 года назад
For loop as you normally do to get data from database and use {{form.title}}
@devrimsarikaya
@devrimsarikaya 3 месяца назад
teşekkürler Thanks
@wemestros
@wemestros 2 года назад
hi! great video! do these still apply for bootstrap 5?
@Codemycom
@Codemycom 2 года назад
of course
@rickkerpvtltd1946
@rickkerpvtltd1946 3 года назад
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 :(
@rickkerpvtltd1946
@rickkerpvtltd1946 3 года назад
@@willbr2kgmailcom Thanks a lot for helping sir 😁
@it-wizard
@it-wizard 2 года назад
what when you use the auth forms from django itself? how can you style those?
@Codemycom
@Codemycom 2 года назад
I have videos on that somewhere
@sifadrifad4202
@sifadrifad4202 4 года назад
thanks
@Codemycom
@Codemycom 4 года назад
You're welcome...thanks for watching!
@azimshaikh9465
@azimshaikh9465 3 года назад
Hey can you tell me how to style the login page? I have created a Custom user using AbstractUser?. Please help me anyone?
@islomelboev556
@islomelboev556 2 года назад
my IDE cannot find form in widgets. Should I import it from anywhere?
@Codemycom
@Codemycom 2 года назад
Just follow the directions in the video. I don't recommend other IDE's.
@baibarsrajput1848
@baibarsrajput1848 3 года назад
sir every thing working fine till two or three posts after that it shows an error in redirection no reverse match
@gabagoo777
@gabagoo777 3 года назад
Solved?
@hariharanbalasubramanianpr4243
@hariharanbalasubramanianpr4243 3 года назад
Is the meta class creation is necessary sir??
@Codemycom
@Codemycom 3 года назад
I wouldn't do it if it wasn't.
@Surajsingh-ox5dl
@Surajsingh-ox5dl 3 года назад
Every happen same but when I click on post nothing post not upload no errors show please please help me
@Codemycom
@Codemycom 3 года назад
Retrace your steps, there are errors in your code.
@aunghtutwin4616
@aunghtutwin4616 4 года назад
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())
@Codemycom
@Codemycom 4 года назад
weird
@aunghtutwin4616
@aunghtutwin4616 4 года назад
@@Codemycom Yeah :3
@shubhamnaik4205
@shubhamnaik4205 4 года назад
Sir, please make tutorials on custom form wizard
@Codemycom
@Codemycom 4 года назад
This video is about custom forms for the blog, I don't know what custom form wizard is
@traivanvon5416
@traivanvon5416 3 года назад
how can we add 2 bootstrap ex form-control and col-md-3 thanks
@StillYearZero
@StillYearZero 3 года назад
'class': 'form-control col-md-3'
@DigisDen
@DigisDen 2 года назад
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?
@meghrajgupta4560
@meghrajgupta4560 Год назад
did you find the solution?
@True_AI_Time
@True_AI_Time 3 года назад
view.py class AddPostView(CreateView): #fields = '__all__' an error occurs Using ModelFormMixin (base class of AddPostView) without the 'fields' attribute is prohibited. why???
@zoljargalenkhtaivan9661
@zoljargalenkhtaivan9661 3 года назад
hello, I have a same problem. Did you find any solution?
@oleksandrmarkov8656
@oleksandrmarkov8656 2 года назад
👍👍👍
@Codemycom
@Codemycom 2 года назад
:-)
@miraccan00
@miraccan00 4 года назад
can you show us how we can use creating models forms in forms.py
@Codemycom
@Codemycom 4 года назад
That's what this video shows you...
@miguelpanta
@miguelpanta 2 года назад
boostrap needs to be installed?
@Codemycom
@Codemycom 2 года назад
No
@UglyOpossum
@UglyOpossum 3 года назад
If I decide to use placeholder, how to delete labels?
@Codemycom
@Codemycom 3 года назад
I think I do that in a video coming up
@vishwamrawal7212
@vishwamrawal7212 3 года назад
hello , I'm applying styling to {{form.as_p}} but its not working i have also created base.html file someone please guide me ?
@Codemycom
@Codemycom 3 года назад
What did you do differently from the video?
@Codemycom
@Codemycom 3 года назад
@@robbyz512 glad you got it sorted
@vaishnavi_as
@vaishnavi_as 3 года назад
@@robbyz512 man thank you so much. I was having a hard time figuring it out. You saved me. Have a nice day :)
@jhoanmartinezsilva2609
@jhoanmartinezsilva2609 3 года назад
What about functions based views?
@Codemycom
@Codemycom 3 года назад
I have lots of courses on that at Codemy.com
@beshy9012
@beshy9012 3 года назад
How to CRUD by mysql with Django?
@Codemycom
@Codemycom 3 года назад
This is all crud in these videos. Nothing changes because of mysql, just add it to your settings.py file
@maihuire11
@maihuire11 3 года назад
The style of the form does not apply, can you help me please.
@jishnugnanadas8312
@jishnugnanadas8312 3 года назад
did you add bootstrap ?
@maihuire11
@maihuire11 3 года назад
@@jishnugnanadas8312 where?
@jishnugnanadas8312
@jishnugnanadas8312 3 года назад
@@maihuire11 getbootstrap.com/docs/4.0/getting-started/introduction/
@maihuire11
@maihuire11 3 года назад
@@jishnugnanadas8312 yes i make it
@SualexisSuarez
@SualexisSuarez 3 года назад
In my case , I had a wrong syntax in forms.py -> widget instead widgets
@DanielMGuerrero
@DanielMGuerrero 2 года назад
Seriously? What an ugly way Django manages this issue. Thanks for all!
@ns6926
@ns6926 4 года назад
Why not just use {% bootstrap_form form %} in the HTML file?
@Codemycom
@Codemycom 4 года назад
We haven't installed that
@genericnamethingy
@genericnamethingy 2 года назад
It's friday every day here and I'm not even in Vegas.
@Codemycom
@Codemycom 2 года назад
Ha!
@Vincent-se8yr
@Vincent-se8yr 4 года назад
In thumbnail it's written bootstap which should be bootstrap
@Codemycom
@Codemycom 4 года назад
Good catch!
@blowintrees61
@blowintrees61 3 года назад
I paid close to 10 grand for a coding boot camp yet keep finding myself using your videos instead of theirs.
@Codemycom
@Codemycom 3 года назад
Ha awesome... fee free to buy me a beer or 10 ;-)
@Gsnchez
@Gsnchez 3 года назад
at 12:57 I get CSRF verification failed :s
@SnazzyNelson
@SnazzyNelson 3 года назад
Did you forget to add {% csrf_token %}
@ashtonfei
@ashtonfei 3 года назад
Walter White is cooking...
@Codemycom
@Codemycom 3 года назад
lol
@authorAxlBlaze
@authorAxlBlaze Год назад
i dint know Walter White taught programming as well
@Codemycom
@Codemycom Год назад
Ha!
@nikhilkahar9545
@nikhilkahar9545 3 года назад
Improperly configured both 'fields' and 'form_class' is not permitted. ;…....... Errror 🙄
@user-yq1uy2qh8t
@user-yq1uy2qh8t 3 года назад
11:01
@juleskuehn1511
@juleskuehn1511 Год назад
assert( (this, is, a, tuple) != [this, is, a, list] )
@jackrabbit0612
@jackrabbit0612 Год назад
There is nothing about bootstrap
@Codemycom
@Codemycom Год назад
pay closer attention, we added a class of form-control. That's pure bootstrap.
@farahbieber12
@farahbieber12 3 года назад
what if we want to do the same with forms instead of a model?