Hey guys, this video was recorded right before the Bootstrap 4.5 update but all of the components used here are the same and the starter files had Bootstrap 4.5 / jQuery 3.5.1 😎. Here are the time stamps: 00:00-00:32 Intro 00:33-07:51 Project Overview & Text Editor 07:52-13:24 Website Starter Files Intro: ➢Tutorial Starter Files: m.w3newbie.com/d/tutorial-38.zip 13:25-18:08 Top Bar HTML & CSS 18:09-25:05 Navigation Menu HTML 25:06-29:27 Navigation Menu CSS 29:28-35:31 Bootstrap Carousel Image Slider Part 1 35:32-41:27 Bootstrap Carousel Image Slider Part 2 41:28-57:43 Bootstrap Carousel Image Slider Part 3 57:44-: Heading & Three Column Section HTML 1:02:32-1:07:32 Fixed Background Image Section 1:07:33-1:10:15 Bootstrap Modal Popup HTML 1:10:16-1:17:33 Emoji Navbar Collapse Section 1:17:34-1:25:05 Two Column & Bootstrap Jumbotron Sections 1:25:06-1:30:29 Footer & Socket HTML 1:30:30-1:36:40 Footer & Socket CSS 1:36:41-1:40:25 Responsive Media Query CSS 1:40:26 How To Put Your Website Online with Website Hosting: ➢Website Hosting: w3n.link/38-bluehost
Hi Ryan, Kudos....Excellent video and big fan so I've subscribed and liked your channel!! Quick question: I'm using bootstrap 4.5 and for some reason having trouble with the "Bootstrap Modal Popup HTML" section...the modals dont seem to pop up using this snippet:
Wonderful tutorial all the same! Was a pleasure to follow through and apply the same. A few notes on what worked for me incase you get some errors.(2022) 1.) Remember aria-hidden = "false" when calling any emojis from font awesome incase they don't show by default. 2.)This tutorial uses the old version of links from font awesome so you can use version 5 if the new version links don't work. 3.) Don't forget to close the div (sounds obvious but still) especially before the modal as this can affect the modals ability to close once the buttons have been clicked on. 😊😊😊
Hi! I've been following your tutorials for a while and learning quite a bit, so I decided to purchase your template-bundle to use it for my small business new website. Really cool features in all of them. Cheers!
Your channel is so beginner friendly and so easy to understand, it has all the information needed to build a site and you explain every line of thoroughly, earn a subs great job man
Hi Ryan, Thank you so much for the fantastic video I've managed to follow along and finished the video for once with an understanding. I've been struggling a lot in coding lately but I think your videos would be perfect for me, keep it up on good work.
Love your work man. I want to become a web developoer and work in my free times to earn more and I have a dream to become a freelancer. Thank you for your tutorials. Good wishes from India 🇮🇳
Your more better than me on explaining. Take Care and Make More Videos. I Support You 😎😎😎. I subscribed on your channel and liked. I learned from you 1 year ago on HTML Thanks Im getting to master html bootstrap and css because of you 😀😀😀
Hey Ryan, does this have everything for an Ecommerce website? Would this work if I dropped it in a BigCommerce site? I am not sure I am asking the right questions. A website is different than an Ecommerce website?
Nice video, I have a question on "Fixed Background Image Section". The css styling for fixed, fixed-wrap and fixed-background provided as part of the initial set up is not explained in the video.
I know that this video is a couple years old now, but it would be so much easier to follow if you would fix the jumping back and forth between the windows so much. If you would just keep the editor on the right or left and the website on the other. Right now you have it just jumping back and forth constantly and it is impossible to read what you typed because you immediately jump to the website as being built, or move on to the next section.
TKS! This is very helpful for me. How many hours will take? Is going to be a break? I have to buy tortillas every Monday before twelve o'clock. I don't want to see it on replay.
great video but i have a serius problem with fixed background... it doesnt apper.. the pat it correct ( i see it by the console ) but if i dont put height it does not apper... and when i use that prop. the text shows in a upper row not up the img...what can i do?
Hey there drew, so I've been following this tutorial and I got as far as the navbar-toggler button but when I finished writing that up nothing would come up on my page. Not quite understanding whats going wrong, is this a common problem?
@@oropori9919 Thankyou i was struggling with this issue. But of course - it is a responsive element so it only shows when the screen is below a certain size!
This is not recommended for Wordpress, you can simply build a header for wordpress and add HTML to the body for example but it defeats the purpose of a content management system. It would be better to simply build a wordpress website and replicate the design if you want to use wordpress.
great vid man! One thing, when I open my site on mobile devices, the "fixed background" image blocks the whole screen on mobile devices, any advice on that? I didn't write any of the toggle emoji functions as I have no need for them, just the fixed background image for the overall look and feel of the site. Haven't been able to fix it on my own. The site works great on os x and windows.
I ran into a problem with the Navbar links. On the larger screen size, the "Home" link was centered in the NavBar but the other links were slightly lower. I enabled "Developer Tools" and discovered there was some 8 px padding, sitting just above the link, that was assigned to the "a.nav-link" class. No where in the CSS is there an item with that class name. Even though I entered as shown in the video, I had to enter the following a.nav-link {padding: 0;} to remove the 8 px padding and bring the other four links up in line with the first one.
Hi Drew! Fantastic video tutorial! I learned a lot! Thanks. However on IOS only the fixed background showed up, it looks like is on top of the home page. Do you know why is that what i missed?
I ran into this problem as well and have been searching everywhere for an answer. Evidently iOS browsers don't like fixed backgrounds and people cant really seem to make them work. I'd advise maybe creating a media query where it only slides on computer screens and have it be a still picture on phone/tablet screens. That might solve the issue.
hello. i have a quaestion. the text on the top bar is on the left and ive tried everything even the text-right you used and it still wont work. please help.
what is difference betwenn border-primary and carousel-captuion? When u changed border-primary you wrote important BUT U DIDNT WRITE !important when u changed carousel-CAPTION . Do we have easy way to understand that?
Hey drew, I learn a lot from you. But there are some point I am unable to fix, can you do it for me. If yes, then what are the charges for it. Please let me know.
Does anyone know how to make the Fixed Background image work on iOS devices? My site works perfectly on computers and Android devices but on iPhones and iPads the Fixed Background image takes up the entire screen and you can't see the site.
How can i reach you, i bought your 12 website bundle but i can not create account, there's a login for existing users but i believe you have to have an account to be able to Login, correct?.....please let me know how to setup the user account.
Awesome. I following you by downloading the starter project. when I reached the carousel part I stacked. the carousel slide is not working. however, the images were loaded like every image has its own div. please help.
The nav menu made at 24:20 doesn't work for me... the button is not appearing. I tried multiple ways and it's not working, either the list is weird or it doesn't work. Anyone can help?
Hey guys, this video was recorded right before the Bootstrap 4.5 update but all of the components used here are the same and the starter files had Bootstrap 4.5 / jQuery 3.5.1 😎. Here are the time stamps:
00:00-00:32 Intro
00:33-07:51 Project Overview & Text Editor
07:52-13:24 Website Starter Files Intro:
➢Tutorial Starter Files: m.w3newbie.com/d/tutorial-38.zip
13:25-18:08 Top Bar HTML & CSS
18:09-25:05 Navigation Menu HTML
25:06-29:27 Navigation Menu CSS
29:28-35:31 Bootstrap Carousel Image Slider Part 1
35:32-41:27 Bootstrap Carousel Image Slider Part 2
41:28-57:43 Bootstrap Carousel Image Slider Part 3
57:44-: Heading & Three Column Section HTML
1:02:32-1:07:32 Fixed Background Image Section
1:07:33-1:10:15 Bootstrap Modal Popup HTML
1:10:16-1:17:33 Emoji Navbar Collapse Section
1:17:34-1:25:05 Two Column & Bootstrap Jumbotron Sections
1:25:06-1:30:29 Footer & Socket HTML
1:30:30-1:36:40 Footer & Socket CSS
1:36:41-1:40:25 Responsive Media Query CSS
1:40:26 How To Put Your Website Online with Website Hosting:
➢Website Hosting: w3n.link/38-bluehost
Thank you!
You are awsome dude...😘😘
Awesome video, surely one of the best tutorials dealing with Bootstrap 4.
Hi Ryan,
Kudos....Excellent video and big fan so I've subscribed and liked your channel!!
Quick question: I'm using bootstrap 4.5 and for some reason having trouble with the "Bootstrap Modal Popup HTML" section...the modals dont seem to pop up
using this snippet:
Any thoughts/help?
Thanks in advance
Great work man! cheers!
Wonderful tutorial all the same! Was a pleasure to follow through and apply the same.
A few notes on what worked for me incase you get some errors.(2022)
1.) Remember aria-hidden = "false" when calling any emojis from font awesome incase they don't show by default.
2.)This tutorial uses the old version of links from font awesome so you can use version 5 if the new version links don't work.
3.) Don't forget to close the div (sounds obvious but still) especially before the modal as this can affect the modals ability to close once the buttons have been clicked on. 😊😊😊
Thank you Gina!!
@@drewr No really thank you Ryan!!!
This is the best way to get started with Bootstrap. Amazing job Drew!
Master, you're incridible at teach. A hug of the Brazil and beginner Full-Stack.
Best web development tutorial I've ever watched. Thanks!
Hi! I've been following your tutorials for a while and learning quite a bit, so I decided to purchase your template-bundle to use it for my small business new website. Really cool features in all of them. Cheers!
Thanks!
Thanks for being here,
I've been looking for a good example for more than a week and finally I saw your video.
It's very good thanks again!
Your channel is so beginner friendly and so easy to understand, it has all the information needed to build a site and you explain every line of thoroughly, earn a subs great job man
Agreed here!
Great how-to video, Drew. Never knew we could do so much with HTML5.
Hi drew i regularly watch your videos and i loved the way you teach us. Please keep up the good work .
Thanks so much, Ryan. You bulid my confidence. I followed it to make my first wedsite and it looks great. Woo!
Great tutorial! And thanks for adding the BlueHost segment as well, very useful! I never actually hosted a site before but will try now
Excellent Tutorial Drew!!! Keep it up. Waiting for more of these. Thank you so much
Hi Ryan,
Thank you so much for the fantastic video I've managed to follow along and finished the video for once with an understanding. I've been struggling a lot in coding lately but I think your videos would be perfect for me, keep it up on good work.
Thanks Drew. This video is excellent, well presented, well explained, easy to follow and extremely helpful
Thanks for the tutorial! It took a couple of hours to do for me, but I finally completed it.
Me too. I spent almost 6 hours to follow it and found resources. It is worthwhile.
Love your work man. I want to become a web developoer and work in my free times to earn more and I have a dream to become a freelancer. Thank you for your tutorials. Good wishes from India 🇮🇳
This is by far the best guidance that I have seen. Thanks bro. I
check your coding course
Great Job drew. I hope you will upload it on TH-cam with resource file so that someone can follow along and reproduce it to learn the technology
Hello Drew, thank you so much to give us such detailed tutorial about Bootstrap. I really learn a lot from you.
Thank you very much for this video. It helped me to build a new website using bootstrap. Now I love bootstrap.
I was hoping for a live stream Bootstrap Website Tutorial! I am waiting 😍!
Thanks for an awesome tutorial. Just what I was looking for.😁
Awesome tutorial - even better than the first one from 2018! I have learned so much. Thank you.
I think its the best bootstrap related video i have watched. I really learned a lot. Thank you!
This tutorial gave me so much knowledge and motivation. You have changed my life🙏. Amazing job bro 💪
Your more better than me on explaining. Take Care and Make More Videos. I Support You 😎😎😎. I subscribed on your channel and liked. I learned from you 1 year ago on HTML Thanks Im getting to master html bootstrap and css because of you 😀😀😀
Thanks :) nice websites you sent me. More videos to come.
Thanks Ryan for getting back to me so quick and helping fix the login problem, thanks
Great demonstration. Learned so much from this.
Hey Ryan, does this have everything for an Ecommerce website? Would this work if I dropped it in a BigCommerce site? I am not sure I am asking the right questions. A website is different than an Ecommerce website?
You are so good man if i knew I was going to be part of this channel
Thank you man!! This has been very helpful to me. Great tutorial 👍🏻👍🏻👍🏻
Awesome Ryan. Thank you for shared you your knowledge with us!
Thanks Drew Ryan!! You make learning easy!! Have a great lucky!
absolute 10/10. thanks so much for making this vid
I learned a lot. loved your tutorial. Many thanks.
Thanks!!! This was a life saver!!
Which color theme you used in this video ? looks so clean .
wondering the same thing ..
Great instruction!! Does the images need to be a certain size to use? Thanks
Bootstrap - it is a future....
your tutorials are awesome
Good job! ADMIN DASHBOARD video would be nice to see in future! Thanks
WOW! You're super good.
Bro. You are awesome 👏🏽
Love u man....awesome work...subscribed u
thanks bro. awesome video
keep up the good work.
Thanks for information bro..
always love for Ryan
Starting to watch..You were referred by a few...Will you also go over adding the pages within the hamburger menu?
Well done this video I know you place more care and all worked great
Nice video, I have a question on "Fixed Background Image Section". The css styling for fixed, fixed-wrap and fixed-background provided as part of the initial set up is not explained in the video.
thanks ever so sir
i have got something new in this video
Good Job Drew
I know that this video is a couple years old now, but it would be so much easier to follow if you would fix the jumping back and forth between the windows so much. If you would just keep the editor on the right or left and the website on the other. Right now you have it just jumping back and forth constantly and it is impossible to read what you typed because you immediately jump to the website as being built, or move on to the next section.
Sir You use html5,css3 ,bootstrap4 ??
You can also use text-white class in the anchor tag...:)
Wow super 👍
Please also make a full responsive website using tailwindcss.
if we want to upload our website to the internet are we obliged to buy a domain?. do you just buy a domain or do you have to have the same hosting?
great video...you have a subscriber.
TKS! This is very helpful for me. How many hours will take? Is going to be a break? I have to buy tortillas every Monday before twelve o'clock. I don't want to see it on replay.
Thanks! It will be almost two hours and no breaks in the premier so tortillas need be pre-heated :)
great. thank you.
Very good brother
i liked it already even not watch it yet
Thanks :)
@@drewr no sir im the one who need to say thanks ! :)))
great video but i have a serius problem with fixed background...
it doesnt apper.. the pat it correct ( i see it by the console ) but if i dont put height it does not apper... and when i use that prop. the text shows in a upper row not up the img...what can i do?
Hey there drew, so I've been following this tutorial and I got as far as the navbar-toggler button but when I finished writing that up nothing would come up on my page. Not quite understanding whats going wrong, is this a common problem?
please check it for medium device.. U Won't get it In large device..
same issue
@@oropori9919 Thankyou i was struggling with this issue. But of course - it is a responsive element so it only shows when the screen is below a certain size!
How can this handcoded website be hosted in WordPress? Thanks for the great tutorial
This is not recommended for Wordpress, you can simply build a header for wordpress and add HTML to the body for example but it defeats the purpose of a content management system. It would be better to simply build a wordpress website and replicate the design if you want to use wordpress.
this video good for beginner
Hi drew can you pls make videos on css that can be applied to bootstrap.bit confusing in applying css
the toggle button doesn't appear with my navbar li'nks ..advice please
i am having the same problem did you solve it?
Same
background image is not working in the fixed div help needed??
great vid man! One thing, when I open my site on mobile devices, the "fixed background" image blocks the whole screen on mobile devices, any advice on that? I didn't write any of the toggle emoji functions as I have no need for them, just the fixed background image for the overall look and feel of the site. Haven't been able to fix it on my own. The site works great on os x and windows.
correction: The image only blocks the whole screen on ios devices.
Hey uh my left and right buttons on the carousel have appeared in random places (up near the navbar). Any idea why?
Hi, is it possible to let the mobile navbar dropdown overlap the content?
I need to add notice bar (if you know what that is) in my website. Can you please help?
in the three column img, i have to put to the class"img-fluid" for this work- i think maybe bootstrap change the names of some attributes
im having issues with the fixed background image using bootstrap 5 beta3
my emoji's are not visible when i click on the first emoji navbar and they worked with the second navbar but after a day they don't work anymore ?
Would you allow us to include this website on our resume
Go for it, James!
my background image is not displaying please i need help thank you
I ran into a problem with the Navbar links. On the larger screen size, the "Home" link was centered in the NavBar but the other links were slightly lower. I enabled "Developer Tools" and discovered there was some 8 px padding, sitting just above the link, that was assigned to the "a.nav-link" class. No where in the CSS is there an item with that class name. Even though I entered as shown in the video, I had to enter the following a.nav-link {padding: 0;} to remove the 8 px padding and bring the other four links up in line with the first one.
Please check it again something is going wrong with u ..i also copy it but i didn’t find any kind of trouble like yous..
Hi Drew! Fantastic video tutorial! I learned a lot! Thanks. However on IOS only the fixed background showed up, it looks like is on top of the home page. Do you know why is that what i missed?
I ran into this problem as well and have been searching everywhere for an answer. Evidently iOS browsers don't like fixed backgrounds and people cant really seem to make them work. I'd advise maybe creating a media query where it only slides on computer screens and have it be a still picture on phone/tablet screens. That might solve the issue.
Going back and fort between html and css is quite confusing... I liked it when you first completed the html then started with css...
i am new to html and LOOK 2 hour of tutorial! i hope it edible..
what version of all.in.js did you use ?
What if i want to put text on the left side also and right side also? Like on the left side "Welcome" and on the right side "Phone number"
hello. i have a quaestion. the text on the top bar is on the left and ive tried everything even the text-right you used and it still wont work. please help.
what is difference betwenn border-primary and carousel-captuion? When u changed border-primary you wrote important BUT U DIDNT WRITE !important when u changed carousel-CAPTION . Do we have easy way to understand that?
Hey drew, I learn a lot from you. But there are some point I am unable to fix, can you do it for me. If yes, then what are the charges for it. Please let me know.
Please make a best responsive designes of social sites like facebook instagram etc
Hello Drew the carousel slide in part 1 is not working I have tried everything
Does anyone know how to make the Fixed Background image work on iOS devices? My site works perfectly on computers and Android devices but on iPhones and iPads the Fixed Background image takes up the entire screen and you can't see the site.
This is the fix:
.fixed {
overflow: hidden;
}
How can i reach you, i bought your 12 website bundle but i can not create account, there's a login for existing users but i believe you have to have an account to be able to Login, correct?.....please let me know how to setup the user account.
In web full screen mode the pictures from carousel don’t fit, on mobile they fit perfectly. Why is that?
which live viewer do you use for vs code?
This is the live server extension. I have a link to it on the resources page of my site with a VS Code lesson: w3newbie.com/resources/#tab-id-6
@@drewr thanks you
hi Drew Ryan, when i clicking toggle buttton link items came without bgcolor and also images are not going down why?
thank
Awesome. I following you by downloading the starter project. when I reached the carousel part I stacked. the carousel slide is not working. however, the images were loaded like every image has its own div. please help.
I would just double check your HTML classes for the carousel since the bootstrap JS file is already linked in the starter files.
waiting
The html isn't working on my windows it just takes me to a website.
The nav menu made at 24:20 doesn't work for me... the button is not appearing. I tried multiple ways and it's not working, either the list is weird or it doesn't work. Anyone can help?
If the nav items appear but not the button then I would check the connection to the bootstrap.js file.
Please the nav bar isn’t working for Me need help