Bootstrap 4 Tutorial: Modal Popups Made Easy

[@Anod26]

One of the best web development tutorial channels on youtube

[@GjK92]

What extensions u have for the divs to light up like that?? Thanks

[@aboutknow]

explain clearly thanks you so much for this tutorial

[@RameenFallschirmjager]

I have serious problem with nested tags. I mean, why do we have so deep tags wrapping around our things. Is there a rule of thumb to know how deep we should nest our tags. Is there anyone who knows how to organize divs enlighten me please!

[@russellabraham9208]

I attempt to oraganize the chaos with semantic tags and aria roles.

[@chaymajebri6670]

You saved my life, Thanks

[@felixgael6596]

thanks for the tutorial and now I have been more thorough for providing id data

[@ahadpathan2484]

I love u bcz of ur speech too much clear that's whyI think all of guys who are watching your video they can understand very clearly...May Allah (God) bless you...Love From Bangladesh Boss...

[@JorgeCR]

I search a bunch of tuts, all of them a horrible music and no voice, good job, I had my modal working now, thanks

[@mrwestthorp3225]

Great stuff, many thanks!

[@SenaidBacinovic]

Thank you :)

[@SenaidBacinovic]

Can you explain more?

[@russellabraham9208]

Thanks for the video. Hey don't forget to add aria roles.

[@MichaelPritchardRR3]

Thank you for your informative video. I have only one constructive criticism, which is regarding the white noise near the end of the video asking if you like the video, is way too loud. I had headphones on during your previous video and jumped out fo my skin! Please turn the volume down or change to a different sound. I have some questions about div soup. I have been learning about HTML 5 and the recommendation to divide up HTML using header, footer, sections, articles etc. to make it more readable for developers. Bootstrap doesn't seem to help with these new tags. I tried changing the first ... into and it seems to work OK, do you have any suggestions on which tags would be better to use? Also does the location of a modal matter? e.g. as it is hidden, to begin with, should it go near the end of a big page near the scripts, so the page renders quicker? Or should it stay with/near the button to make it easier for other developers to read? Thanks,

[@SenaidBacinovic]

Hey Michael, I have just noticed that audio issue and it's really annoying, thank you so much for the feedback, I will make sure with my editors it doesn't happen again. In HTML that is a good practice, but with Bootstrap you definitely should follow up practice for that one. If someone proficient in Bootstrap see he will be pretty much confused, so I would rather practice Bootstrap suggestions. On my channel there is great video about Bootstrap Grid System. For the modals, you can definitely put those at the bottom for faster page rendering, since they are invisible (like you said).

[@rjrviudez]

Excelent. Video makes easy the modal. Thank you very much

[@nonopanzu1193]

Bomboclat! Well done man. Bless HD vid, clear exlaination, and usedfull tutorial. Good job man. Jah live.

[@SenaidBacinovic]

Thank you! :)

[@mullermullersr4870]

@@SenaidBacinovic stackoverflow.com/questions/67318769/misplaced-modal-dialog-box-action-url-to-main-page-urlblackedout-error do you know how to handle this bug? thank you.

[@ricardoassis8400]

Good job man, thanks from Brazil! I'll use in my project in Laravel 7 with Admin Lte 3!

[@ploratran]

Life Saving. Thank you

[@adityasovani4435]

Thanks this helps a lot

[@SenaidBacinovic]

My pleasure, thank you :)

[@lokokrz.gaming]

Trying to do with no "data" in the modals is this possible?

[@bcdeveloperc6142]

why are you writing in android studio and why are these php files? Curious as to the approach? is this eventually going to be hosted on *x-AMP type server? hence the PHP file? i'm not questioning why, just the ends of what you're doing so i can follow along, friend. Is there a vid where this setup is present? I am already up and running on android studio, just not used to running php files on the web from there. Link to Setup? Or why we are writing php files in the first place Is it a larger project or end goal of the tutorial?

[@allymechservices7532]

I create three modals. and inside the body type some input radio tags. but only the first modal is proper working. and tow and three modals show but input radio tag not working. please give me ans

[@lorenzolonghi8697]

Great video my friend, really useful, thank you so much

[@billelguechi5831]

Awesome tutorial, waiting for Advanced jQuery :)

[@SenaidBacinovic]

Thank you, will have something soon :)

[@podborova23]

Nice tutorial!

[@SenaidBacinovic]

Thank you :)

[@tjat55]

Thank you so much! I look forward to tutorials on SEMANTIC UI + PHP + AJAX to manage a mysql database...

[@SenaidBacinovic]

I will cook something for you, thank you :)

[@Induraj11]

simple and effective tutorial.. thanks

[@shrikantshete]

Really, it was great video and it was made easy :) Thanks

[@3ligijus]

Thank you bro !

[@abderraoufbenchoubane1905]

Well made video keep up you gained a follower

[@SenaidBacinovic]

I appreciate it!

[@disezmike7755]

In 5:04 Please tell me how to do

[@alexq3498]

Very clear. End to End tutorial. Thanks mate!

[@simomessek934]

It a big help for my college project thanks

[@samanesharify]

Thank you so much, could you please explain how to send data from html to the modal?

[@deepikarajan9221]

Very clear video.i like it. So I subscribed too. I have a question. I want to have two buttons in the center one after other in the popup modal and also I need the values of the button when it is clicked. Can you pls explain it. Will be much helpful for me. I hope I will get an intimation once it's done. Thank you.

[@shadowgazesup]

Hey Senaid from Coding Passive Income. Thanks for your work. I like your channel because here is represented a lot of practical cases of using php but honestly regarding to this video there are a lot of similar videos/guides of using bootstrap on KZbin. Looking forward for more complex guides.

[@SenaidBacinovic]

Thank you, appreciate the feedback. I will soon post some complex tutorials, but I also wanted to help those that are asking me all the time about Bootstrap tutorials.

[@RPA99]

Great Video man! This is great for Beginners! I already know Bootstrap, but I wanted to watch it anyways! Love It

[@SenaidBacinovic]

Thank you, appreciate it!

[@rafaeldayaocpacma]

Thank you

[@hshs510]

I cannot close the modal. data-dismiss doesn't seem to be functioning. I'm using Bootstrap4 & following Django tutorial by Corey Schafer. I've a profile image in navbar which I want to open in modal on click. I can view the image but can't close it. I've tried this on Chrome & Opera. I've also tried hard refresh

[@hshs510]

Solved the issue by placing the code at the top of the doc right after where the starts.

[@n71-doc58]

Thanks

[@SenaidBacinovic]

Thank you :)

[@anirbanchatterjee1376]

You are awesome 👌

[@SenaidBacinovic]

Thank you

[@mr_makhura]

I followed everything step by step and when I clicked the link nothing appeared - what exact version of bootstrap 4 did you use ?

[@m.o.7661]

thanks for the video. If my site already loads bootstrap, do I need to wright the coding in the page where I want to show the popup? I am confused. Where do I store the header in a wordpress page or somewhere else in the website? can you or any one help me?

[@ikramhdioud6064]

very clear and very nice job , but i've got a veru simple problem .... this popup isn't a view like login view .... i'll use it when i click on a button. genarly i have to make a modal when i click on button .thank you

[@reymarklopez2127]

Please make a tutorial about profile card with modal

[@allymechservices7532]

thank you very much

[@bootstraptutorials7993]

Great video

[@paulocarsten9216]

THANK YOU - GRACIAS - OBRIGADO YOU THE MAN =]

[@SenaidBacinovic]

Hehe, my pleasure, thank you!

[@rizz932]

wow thank u❤️

[@RameenFallschirmjager]

were the code you used in tags vanilla JavaScript or jQuery?

[@SenaidBacinovic]

It can be used for both.

[@RameenFallschirmjager]

@@SenaidBacinovic So it means javascript and jquery or integrated?!

[@SenaidBacinovic]

@@RameenFallschirmjager both

[@RameenFallschirmjager]

@@SenaidBacinovic Now I'm more confused before than your answer!

[@SenaidBacinovic]

Maybe I didn't understand your question.. Can you elaborate again?

[@juanandrew1356]

hey bro, i have followed your instructions but when i clicked the button, the modal wont popup. any suggestion?

[@juanandrew1356]

thanks. i changed CDN to bootstrap 4.61 from 5.13 and its working

[@aguantejp]

Very nice video, very nice code, very nice vodka friend!

[@SenaidBacinovic]

Thank you :)

[@MrSirojiddin]

Thank you for your video, it is amazing, i need to get that popup when i reload page, not click the button, Can you link me any reference for it please?? thank you

[@SenaidBacinovic]

Thank you. You can do something like: $(document).ready(function() { $("#myModal").modal('show'); });

[@MrSirojiddin]

@@SenaidBacinovic Wow thank you so much youre really great. Sbosibo

[@SenaidBacinovic]

@@MrSirojiddin Glad I could help :)

[@pjetrodluigji3060]

thank you.

[@fugeeohu9357]

Are modal popups better than a new window for video chat?

[@SenaidBacinovic]

I would use new tab/window.

[@artemis1306]

Thank you so much for this great video. I was able to finally understand how it works. 💞

[@charlesbovalis6591]

Excellent video - one clarification if you don't mind: does the '.modal' part in the statement: $("#myModal").modal('show'); is it a call to an object or the class name you have given to the div element in the html body ? Thank you for your time.

[@riddepk]

Nice job !! and very clear, i'll finally be able too use a popup :-) , but i've got a problem who should i call the popup from an other page . if i've got a button "create" when i click i would like to have a popup to do my creation..

[@Mmou583]

thank you so much :)

[@Vladyslave-7t]

How to give unique url for each popup form. How to open popup form by using url.

[@MrGigi-dz9cv]

Hello. I need to add custom class to modal-content via java-script when it opens, and remove it when it closes. How can i do that ?

[@tobias__n]

$('#your_modal').modal('show'); $('#your_element_id').addClass('your_class'); Put this in a method and call it via onClick on your button that should open the modal

[@MrGigi-dz9cv]

@@tobias__n Thank you. But, my problem is when the user closes the modal by clicking outside it. Then is when i need the class to be removed.

[@tobias__n]

@@MrGigi-dz9cv that should work with $('#your_modal').on('hidden.bs.modal', function () { //Remove class here }); You can find that in the Bootstrap Documentation for Modals under "Events"

[@MrGigi-dz9cv]

@@tobias__n Ah ok. This is what i was looking for. Thank you

[@DharmalingamValaguruitinfo]

Great Video !!

[@Lorenalopez-zc3sl]

Para monitorear los clic e impresiones que tiene un popup o barra flotante, utilizo hooktrix.com tenéis que probarlo, creo que tiene un plan de 7 días gratis.

[@dinoemso2845]

Great video Senaid! It's fast and simple. I have a question for you Senaid. Is it possible to confirm localhost email on microsoft outlook/hotmail? Or only on google gmail?

[@SenaidBacinovic]

Hey Dino, thank you so much. It's possible to confirm email from any service, it doesn't need to be Gmail. The reason I use that as an example is because it's free and almost anyone already have one account. Next week I will publish new video about SendGrid, which is professional service for sending emails and allow 100 emails per day for free.

[@alcaravan555]

Many thanks, as you say "easy and simple", after you see the explanation.

[@md.kamruzzamanrony9900]

awesome :)

[@SenaidBacinovic]

Thank you!

[@rimzarizwan4737]

wow Its pretty much easy after watching your Tutorial...Thanks!

[@SenaidBacinovic]

Awesome, glad if I could help :)

[@bijinjob2558]

how to make it draggable

[@rimzouari8687]

not working for me using angular 8

[@ammar_kes]

your editor name please

[@SenaidBacinovic]

PHPStorm

[@ammar_kes]

@@SenaidBacinovic it's not free ?

[@okokayay]

bro thx

[@penosled]

do that with variables if you know how

[@SenaidBacinovic]

Can you elaborate on that? Not sure what do you mean...

[@penosled]

​@@SenaidBacinovic on blog page, make every post to open in modal :p

[@johnm4141]

Thank you very much coding passive income. I had multiple modals on my page and they kept displaying the same image. I didn't know that the ids in the modals and the data-targets in the button have to be the same but unique for each pair.

[@cellatreis2978]

JavaScript in body, Nice Programming ;)

[@anomalyunit4637]

Mongal pfp from the movie?

[@kenilrabadiya1431]

👌👌

[@SenaidBacinovic]

thx :)

[@lastninja2022]

very nice tutorial but please can you do it in bootstrap 5 now? new sub here

[@historywnetstatls1547]

Great video! Bootstrap, very important. I am going through coding and adding content to my KZbin channel. Our videos are very amateurish looking compared to yours 😄.

[@miottraja8162]

Ako kog interesuje Bootstrap mogu ponuditi svoju knjigu Osnove Bootstrap-a objavljenu prosle gidine koja ima i primera koda i slika objasnjenja na oko 400 stranica B5 formata

[@RameenFallschirmjager]

In the age of VS Code, it's beyond someone would use other IDEs!

[@SenaidBacinovic]

It's all about the person using it :)

[@sreerags6762]

not working

[@IDI-DEVIL]

Bring me popup breakfast to copy :)

[@Carmanx360]

Iloveu.

[@SG-db3sk]

Fuck how can i not find a simple method for this....auto typing does not help us understand anything...

[@emilywong4601]

Xelf.com ad

[@justacannoli5162]

Thanks you so much

[@swapnilgawde7024]

Thanks

[@SenaidBacinovic]

Thank you

[@mohdrahman007]

thank you