Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

[@drewr]

Hi guys, thanks for supporting my channel and taking my Bootstrap Theme course on Udemy :).

[@dimitarvel1441]

Hey man, i need your expert opinion on this... I have a web app that has to have a web server to function properly because it is linked to an SQL database. It is for my school competition and i have to send it by Saturday night. I have been searching for free web hosting for hours and couldnt find any. Now could you direct me atleast at some cheep hosts that support SQL and will function fairly well? I am really in a tight spot here...

[@drewr]

Hey sorry I couldn't get to this sooner but you don't need a web hosting account for a server if you can present your project on your own computer. You can use a free program like MAMP or XAMPP for your server locally on your computer (mac or windows).

[@jakubgadzala7474]

You are great tutor man - your videos are simple and easy to follow. Thank you!

[@EmmanuelBLONVIA]

I just did the 880th like :-). Thanks for this course

[@m.bilalbashir8317]

i cant download the starter files, if somebody can mail me that folder, plzz, [e-mail]

[@takaomiyawaki7343]

Thank you for this great tutorial. I can't remember everything in one time so I have to write again and again. Image Slider 12:50 Jumbotron 18:15 Welcome Section 22:07 Three Column Section 24:23 Two Column Section 29:03 Fixed background 34:39 Emoji Section 35:08 Meet the team 38:45 Cards 40:11 Two Column Section 45:15 Connect 46:51 Footer 49:57 CSS 55:05 CSS:jumbotron 1:04:00 CSS:Welcome 1:05:45 CSS:Button 1:10:20 CSS:Social media 1:11:35 CSS:Footer 1:15:52 Thanks again.

[@suryakantmishra8346]

Takao Miyawaki thank you so much 😊

[@paolomelendres4675]

thank you. wehere is flexbox

[@abiesca]

Thanks alot

[@ikharus1026]

We can already see them but tnanks

[@AmitKumar-nn1rr]

How did he do the fixed background???

[@manidharsimha2844]

This is the first video that introduced me to web dev,today i am an angular developer with 1.6 yrs of exp. Thanks drew, your video made me fond of web dev

[@martinboom01]

Mr. Ryan, thank you very much for this absolute unique tutorial. It really helped me to understand the logic of Bootstrap engine. One recommendation for watchers.... try to write the whole code by yourself. Every change test immediately. Don't just copy'n'paste blocks of code from other creators. Only by this way you will understand.

[@Ibrahim-wh2lx]

Yes it really amazing tutorials for bootstsrap?

[@lorenzobandinelli2638]

it took me 2 days (1.5-3 hours per day) to understand and copy everything, that was my first contact with any real piece of web-design and bootstrap (i was familiarized with vanilla JS, CSS and HTML tough) thanks for the incredible video and lesson! until next time

[@yashchandak8016]

Ohhhh man I don't know anything as tomorrow is project submission but this tutorial just saved me. Thanks for explaining each and everything from scratch.

[@drewr]

Thanks! Glad this helped!

[@humphreyangel7760]

Hello pals, i have watched tutorials on responsive Bootstrap Website, But this one by Drew Ryan is far beyond the rest. This is when I am learning HTML, CSS, JavaScript, but after watching this video and learning with it, I am now able to teach my friends who have degrees in computer science on how to make professional responsive Bootstrap website. Thanks Drew, and i can't wait for more of your tutorials on web designing and development. I have given you 101% for this work.

[@ilhamsa01]

im finishing this video in 6 hour ... I feel very satisfied , Thanks So much Master...

[@drewr]

Awesome, nice work!

[@techcanyon411]

please how can i add currency exchange rate ,calculator, and file downloader button to my blog menu navbar?

[@mhasancoder]

How you finished Fixed Fixed Background Section ?

[@GunturThunder]

@@mhasancoder do you find how to Background Section

[@kristiyanivanov7414]

@@GunturThunder did you find how to do it? please reply if so

[@kniscior]

boy, this is amazing from 0 to the frontend dev in 1:30 honestly ive earned $600 on this tutorial and the customer is so happy about the effect inb4 dont blame me for anything im just 18 and did it for my friend

[@jacoposarti4785]

Thanks kindly mate for this video, all developers on KZbin are good at building a website but the way you do it is very explanatory and detailed, you always specify what the class that we are using is doing. You not only are a very good developer, since the front end of this website is really really cool, you also are a very good teacher. Thanks for that.

[@rks1509]

You are just great buddy! This was the first bootstrap tutorial I saw where you didn't just copy-paste the bootstrap elements from Bootstrap website but rather explained everything!

[@rks1509]

@@saifulnicola8417 well, I need someone too buddy but right now I m like so engaged in other things that I can't actually make enough time for practising my hand at web dev

[@haleemsafi3358]

one of the best training I have learned a lot

[@mcarrizosac]

I quit web design 10 years ago and I was struggling to create a responsive website, it was all like black magic to me but this tutorial got me back into the light, it was like time traveling to year 3019 LOL! Thank you so much for this!

[@successawuku-amador4403]

Sir. In fact, you are the best web designer i hv seen so far. I am hungry but you still kept me curious . I really enjoyed your video. Am now bootstrap guru.

[@drewr]

Thanks I appreciate it!

[@osehiaseehilen5718]

Thank you so much; this is the first time I built my own bootstrap website completely. Your video is the best so far I have seen. I need more. God bless you.

[@drewr]

Thanks Osehiase! That's great.

[@mapalochibwe7631]

I am absolutely grateful Drew Brian for taking the initiative to share this information. My comment's come a little late but I would love to see a video on Bootstrap carousels.

[@Computer-Tutorials]

Thanks a lot. Because of you, I am able to convert my website to responsive.

[@shouravpaul263]

OMG u r a life saver.... I have been trying a lot of stuffs lately to make this bootstrap thing work.. but nothing worked so far... Until i saw ur video...keep it man.. looking forward to more such awesome videos...

[@vuankhanhbeo]

Thanks so much. I'm start learning bootstrap from zero, and this tutorial really save my life. This is the only one tut that meet my need on entire internet. Really love your work there!

[@drewr]

Hey thanks!

[@flashgamewalkthroughs5145]

Hey Drew I had never heard of you or your youtube channel before, and I hadn't thought, whether I wanted to learn Bootstrap or not. But then I thought: "Well, it can't hurt me". And then I checked out this video of yours, and for Christ's sake, it's amazing! Thanks for that! It definitely earned you a subscriber! Victor

[@AguiaPC]

Congratulations for the work, here in Brazil we are lacking tutorials of this live. Thank you.

[@ahmeds2278]

OMG !!!! Thanks a lot from the bottom of my heart. I really am a backend type of a guy. I don't really like designing and front-end stuff, so I was looking for a video to teach me bootstrap to use it as CSS library and focus on backend stuff. Thanks A LOT again.

[@mihirmehta2242]

One can never ask for a better tutorial than this :) Cheers to the tutor :D

[@ammanh]

This is the most orderly video I have seen even on youtube. And anyone can get a clear understanding to watch full tutorial. You did marvelously. Thank You very much, sir!

[@priyamganguly]

A good tutorial to learn from. Thanks! However, I found two issues that needs attention: 1) The "Fixed Background Image" section needed a bit of explanation. 2) Keep the mouse left button pressed on the purple button. It retains the blue colour from btn-primary class of Bootstrap. That needs to be rectified.

[@drewr]

Thanks for the tips! For better explanations, check out the Bootstrap courses on my website :)

[@gregwalker2151]

You’ve done a fantastic job with this tutorial. I completed it over a couple of days and now have a pretty good understanding of how it all hangs together. Well done.

[@mineturtle1841]

To fix the Scrolling image not appearing i did the following in the css file: Removed the #fixed-wrap {...} part Changed the #fixed{ ...} to : #fixed{ background-image: url('YOUR IMG LOCATION'); height: 600px; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; Also change the figure{...} to: figure { margin: 0; }

[@mcastillo78]

Excellent! Good Job!

[@hauvochung3464]

Thank you very much

[@raghavrudhra3327]

this is not working for me for some reason did exactly as you said.

[@sanji0302177]

Nice!

[@jonfrosdick]

Perfect, thanks

[@arwahsapi]

What I like in this video is that not a word is wasted in this tutorial!

[@kevinzhang8974]

Hi Ryan: thanks for this. I just get up 6 am and completed this morning ... looking forward for more ...

[@drewr]

Awesome!

[@XavierKickz]

kevin zhang what could be the problem if chrome taking too long to load my index.html

[@longpopy]

it could be your database server issue if you are fetching dynamic datas.

[@jayantsapra6877]

hello Ryan I never ever seen this type of video, you explained each and every concepts, i don't know how I say my words its great, its awesome and its marvelous...................

[@drewr]

Thanks! This is an older video, subscribe as I have an update coming for this design. I will link it in the description.

[@victorchiappetta330]

This is really great. Introduces some very cool concepts. And I love how you separated the HTML into logical sections. Makes it so easy to identify and I am modifying as I go along so I can just copy and paste into a Bootcamp project. Thanks so much.

[@limu3749]

5 years ago video and still the best bootstrap 4 tutorial!

[@pooriahonarmand111]

55:07 css starts

[@marta_daria7]

where is the part with the fixed image?

[@emmanuelmozart1134]

Thanks Mr. Drew, this was quite helpful. Pretty much one of the non-entertainment 1 hr+ videos I have watched on youtube from beginning to end!

[@xccraftcx]

1 thousand likes says hahaha you've already 7,5k ;) all the love from here!

[@drewr]

Didn't see that coming - thanks!

[@9450613592]

Hey ryan, thank you for your tutorial, I am not a computer program but after watching your tutorial I believe that I also create my responsive website. I finished your tutorial and create website as similar as your. Congratulations ryan

[@dougui20]

Do you memorize all these classes or just always to bootstrap copy and paste these codes I mean for the real world

[@lucydear7928]

Man, let me tell you something. You are GREAT! Where I am from we say you are ''cold-blooded". Here that means can't nobody beat you. Smooth with it.... :)

[@erikaalexandra22]

This is a great tutorial Drew! Keep them up. Struggling with the two column part at the standard width break point with the updated Bootstrap (it's more likely something I did... Ha!) but this has taught me soo much

[@mikesedaghatnia3279]

Wow thanks man, people like you are rare nowadays.

[@drewr]

Thanks!

[@marcostrevinorodriguez1254]

Awesome training man, i'm feeling more confident to start creting some stuf by myself =D

[@pt8703]

wow, I feel super grateful to have come across this lifesaver tutorial! You really make us feel that anything is possible. I always used to see such beautifully designed responsive websites and feel it would be so complex! But you've made us realise that we can also do it! A massive thank you!

[@grahamwang58]

This is a great tutorial and thank you very much for doing it.

[@markbalazo1914]

It was like listening to a mindfulness session because your voice is relaxing. Thank you Sir for this great vid!

[@Sapphiamur]

You are amazing, thank you so much!!

[@juho-pekkaropelinen5317]

By far the best bootstrap tutorial I have found so far! I would give this a thousand thumbs up if I could..Great job man!

[@KasproGe]

Thanks so much for this tutorial, really very helpful, just one thing, I think i can't find in the video how you did the fixed background!!!

[@kristiyanivanov7414]

same

[@SAlmanKhanDev]

What a great presentation. You didn't sound monotonous or bored at any time. I have enjoyed every bit of it. Thanks bro!

[@asmaakhan5385]

Awesome tutorial Drew. Please make a video similar to this on how to make a complete professional website in PHP. Thank you

[@gtaseed]

Haha, 1k likes. How about 34k? It's indicative of the quality of the content my man, congrats!

[@steffanxavier]

I really helped with this video, God Bless You Mr.Drew! ^^

[@bsattechnology]

Ryan, you just saved my ass with this tutorial. How can I like this tutorial a thousand times?

[@batuhangulgor5976]

You can be one of the best thing i have faced in youtube

[@drewr]

Thanks Batuhan! 😎 much appreciated

[@KevinBond2663]

Best Bootstrap 4 education video that I have seen so far. Great job! And thank you for taking the time. This now made Bootstrap so much easier to understand.

[@sklepdaniela7876]

What is the reason for writing all this classes? "col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10" wouldnt it be the same result as just: "col-md-9 col-xl-10" ?

[@janbrand4782]

Hi Drew, Your tutorials do help a lot. Please go on!

[@drewr]

Thanks!

[@pureaccuracy3543]

I watched this video from start to finish at what point did you show us how to insert the mac.png fixed image? I can't find it.

[@ducbuihuynh6161]

find it in style.css file (for fast: you can press Ctrl + F then search mac.png and you will see it), try it

[@kazeemkazeem3204]

@@ducbuihuynh6161 locating the img is not the issue but insert it into the whole code. the position keeps over lapping to the team cards. any help??

[@finessecanada1167]

@@kazeemkazeem3204 im stuck there too i dont know how to get it in he skiped over that part

[@finessecanada1167]

@drewryan help mac.png

[@kristiyanivanov7414]

same thing here, he didn't do it

[@silvadexter3222]

Woah, this is awesome. I went over Bootstrap concepts and this tutorial really shows me how these Bootstrap knowledge should be used

[@drewr]

Thanks! If you like this you should check out my later Bootstrap 4 video: kzbin.info/www/bejne/fqWUd2yBqs19hZY

[@rushabhpatel4291]

Great stuff man. If I tried to create this on my own I would make so many mistakes of adding a class to the wrong place or adding a wrong class. I can never figure out wether to add a class in line or add a class to a div wrapping element.

[@amitnavik]

problem with fixed image that cannot be displayed

[@robertrydlewski9538]

@@amitnavik hi Amita ... yea I have one ... the images can't be displayed... I check out code and it's work only if you dont use: Home About Services Team Connect .. as soon I add: - Complete Bootstrap 4 Website Layout the code dont work... Please help .. .I am newbie and have been doing this for 3 weeks.. I stuck with this simple issue for past 3 days and cant find solution

[@pola478]

It's been nice to start experience with bootstrap learning from you. Well, clearly explained. And you have nice voice too:)

[@robertthiel8154]

Great video altogether. Unless I missed something, I don't see where you put the background image for the parallax 'fixed' image. I remember setting up the HTML and when you got to the CSS portion - you tell us we don't need to do anything else here. Small note on an otherwise strong bootstrap video. Thanks for the upload!

[@chukwuperfect6813]

You've really saved me from big time stress, thanks, Man.

[@ahtjohn2341]

we need more & more & more tutorial like this

[@ankitgirdhar2238]

agreed!!

[@saalleER]

Buy he's tutorial from the link above and support him.

[@HarmanpreetSingh-fw6ss]

I had already made a website but it was not responsive at all and was not working well but now its going good. Thanks for clearing all the doubts.

[@LearningToFly77]

The navbar did not work well for me. The Toggler icon always appears to the right of the logo. Also on the big screen

[@DJPenta]

try and make sure all your brackets are properly closed, that is what bugged mine. i had 1 ">" missing on the img and caused the bar not to align right

[@Phlyndor]

Such a helpful and educational video. You're a great teacher. I love how you didn't edit out the little mistakes here and there. It's nice to see the troubleshooting approaches.

[@drewr]

Thanks!

[@zwiebec78]

maybe I'm missing something, but it seems like rem & em in this example are the same? curious why you're using them both? thanks, great tutorial!

[@TruthSeekerClub]

nope, em relative to the page font size. rem relative to the parent size.

[@Bevallalom]

@@TruthSeekerClub it's the other way around :)

[@TruthSeekerClub]

@@Bevallalom you're right

[@rademeus]

Man... I just discovery you. You are amazing! TXH for you all work and help. :) Kudos from Poland

[@kinstar]

7:02 why did i never think of helping myself like that

[@andersonescobar1350]

Hi drew. Mi name is Anderson Escobar from Medellin Colombia . Thank you so much for this video . I dont talk English, but im very happy with your work . Congratulations . Mil gracias por todo amigo ¡¡¡¡¡

[@ahtjohn2341]

amazing !!! thanks for uploading like this tutorial & please keep continue...

[@drewr]

Thanks dude!

[@zakariaetatbat8921]

can you send me the files please [e-mail]

[@rohansip1379]

Drew Ryan can you mail me your entire source code file .....on [e-mail].....i m not getting this tutorialz... Please send me your template with complete coding

[@dubaijerryful]

To me as well bro. [e-mail]

[@bdcodex]

I am watching this video on October 20, 2020. And I really liked the video. Thank you so much for sharing these knowledge with us.

[@anandinamdar4054]

world class tutorial. ❤👌👌 Helped me a lot. Thanks a lot @Drew Ryan

[@samessshrestha7357]

i was in a moment where i knew something but that someting wasnt enough, i heartly thank you for making the video , Cheers Brother

[@TriXoX1]

Can i use parts of this for commercial projects? Well done !

[@michellejoymedez3481]

Thank you so much, I hate myself for copying other developers who use vanilla css. Bootstrap is my holy grail.

[@learnwithnorlyn]

Thank you. I will link my finished product once I have coded the other pages.

[@slayer3run]

we are still waiting

[@e.s0815]

You Are The Best Mentor For Making A Website !

[@NewCeptionv2]

Hey Drew, thanks for the awesome Video, really helped me getting started with my own Website! Just a quick Question: Am I allowed to use the CSS and Standart HTML Code, you used in this Video, in a commercial Project (will not use any of the Images)? Thanks

[@drewr]

Hey yes you can use it! With that, a credited link to my website w3newbie.com is appreciated but not required! :)

[@pritamparab]

Drew Ryan you are awesome

[@rahuladepu2244]

can i get the standard code plz

[@abdusamadabdusattorov8494]

Thank you Drew Ryan! I really loved your Bootstrap tutorial. Tutorials with high quality like yours are quite rare. You've just earned one loyal fan and subscriber :)

[@zulqarnainshah6047]

I think you forgot to save Fixed background in the video :/

[@al_barakah371]

yes :/

[@djspikeone]

where he has in index.html this lane with fixed id just put in between them also change url on css file at the bottom where he has mac2.png on your own image

[@tobiashoffmann1354]

it is already id="fixed" and does not work^^

[@zi59ghymdmnfghn]

In the css file you should change the "figure { position: relative; width: 100%; height: 60%; margin: 0!important;" in: figure { position: relative; width: 100%; height: 500px; margin: 0!important; So you have to change the height from 60% in 500px because there aren't parameters to calculate the percentage.

[@mikunico7144]

Zegaie Luca Camporese omg thank you! I’ve been looking for solutions for hours. You have made my day. Thank you😭

[@bkatyayanoffice9658]

was aiming for 1k likes but this tut deserves more than that thankyou, 21k in 2020 and counting

[@AbidAlWassie]

Making Web Pages with bootstrap is butt time faster than typing out the entire thing manually!

[@misterjedu]

Just five minutes in the tutorial, I already subscribed and I'm sure I'll be learning a ton of things on your channel. Thanks a bunch for your hardwork.

[@olpner]

The "Home About Service Team Connect" ends up under the image. Does anyone know what I might have done wrong?

[@blackswordsman9745]

I have done the same thing as him yet I don't see the same result :(

[@slipstream01]

Definitely made way more than 1000 likes mate good job

[@Quand101]

great video ... thanx

[@zakariaetatbat8921]

can you send me the files please [e-mail]

[@mathewbryant1881]

U just saved me from failing a final my mans! Great video.

[@drewr]

Awesome! Glad this helped 😄

[@harismalik4330]

Yahooooo I have Done it in 4 hours Thanks Alot but you did not tell about fixed background

[@rajkoglisovic2615]

you can see in style.css -> /*--- Fixed Background Image --*/ all code for fixed background image. If you did not download Starter File, this is the code: /*---Firefox Bug Fix --*/ .carousel-item { transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-backface-visibility: visible; backface-visibility: visible; } /*--- Fixed Background Image --*/ figure { position: relative; width: 100%; height: 60%; margin: 0!important; } .fixed-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #fixed { background-image: url('img/mac.png'); position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }

[@jackfrost8969]

just give it a style of background-attachment: fixed; in same class section

[@bantzrayder8976]

I was confused by this too. I had my stylesheet in a folder, so i needed to add a ../ in front of the url. Just replying in case you had the same problem. Sometimes multiple people have the same brainfart :)

[@zakariaetatbat8921]

can you send me the files please [e-mail]

[@ashiinsane90]

what about the HTML

[@thiravidan1]

Thanks for your brilliant explanation on the BootStrap4.0. You are a star.

[@finalfantasy7820]

"poo for this guy..." What an insult for such a cute ice-cream. smh

[@gamingwithabastahiri9525]

poop you

[@micahdittmar9072]

Great walkthrough! This really helped me get a better grasp with the CSS side of things.

[@Panossa]

Sadly the title kinda suggests that this is a tutorial for e.g. Bootstrap while the actual video seems to be aimed at people who already know much about it.

[@valentinroux7448]

Check out all the tutorial about bootstrap 4 on w3school, i got the same feeling, then just learn from w3school and came back to better understand, and the tutorial here is pretty good ! Good day :)

[@kristiyanivanov7414]

For anyone wondering about the figure/fixed image background- you need in between the two div's and the "figure". My html became like so (the url_for is jinja2 syntax): Hope this helps!

[@MultiPss]

It works but the image does not scroll like the video

[@iqrauszud1513]

I am saying to Bangladesh, every video you like very much, so i am very happy to see your video so thank you very much. I pray that I can be a developer like you.

[@ajpfeil2420]

Will definitely be buying your Udemy Courses! Bravo!

[@wildhuntmedia5219]

Superb job - great introduction to Bootstrap4, I amn much more confident in translating my designs using this library now, thank you!

[@drewr]

Awesome, glad this helps! 😎

[@AlexanderPerez-oe1gu]

Thank you for posting, great job. Best bootstrap tutorial I've seen. Nothing beats a project-based tutorial.

[@dylanjones6217]

Helped me massively, best Bootstrap tutorial on KZbin.

[@kakashiworld4872]

Good tutorial. I watch this from start to finish. Thank you for providing a good movie. I respect you.