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

Поділитися
Вставка
  • Опубліковано 16 гру 2024

КОМЕНТАРІ • 1,4 тис.

  • @drewr
    @drewr  6 років тому +294

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

    • @dimitarvel1441
      @dimitarvel1441 6 років тому +6

      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
      @drewr  6 років тому +12

      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
      @jakubgadzala7474 6 років тому +4

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

    • @EmmanuelBLONVIA
      @EmmanuelBLONVIA 6 років тому +3

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

    • @m.bilalbashir8317
      @m.bilalbashir8317 6 років тому +2

      i cant download the starter files, if somebody can mail me that folder, plzz, ibilalbashir@gmail.com

  • @takaomiyawaki7343
    @takaomiyawaki7343 4 роки тому +374

    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.

  • @manidharsimha2844
    @manidharsimha2844 2 роки тому +1

    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
    @martinboom01 6 років тому +81

    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
      @Ibrahim-wh2lx 4 роки тому

      Yes it really amazing tutorials for bootstsrap?

  • @lorenzobandinelli2638
    @lorenzobandinelli2638 3 роки тому +7

    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
    @yashchandak8016 6 років тому +41

    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
      @drewr  6 років тому +6

      Thanks! Glad this helped!

  • @mcarrizosac
    @mcarrizosac 5 років тому

    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!

  • @ilhamsa01
    @ilhamsa01 6 років тому +50

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

    • @drewr
      @drewr  6 років тому +5

      Awesome, nice work!

    • @techcanyon411
      @techcanyon411 6 років тому +1

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

    • @mhasancoder
      @mhasancoder 4 роки тому

      How you finished Fixed Fixed Background Section ?

    • @GunturThunder
      @GunturThunder 4 роки тому

      @@mhasancoder do you find how to Background Section

    • @kristiyanivanov7414
      @kristiyanivanov7414 4 роки тому

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

  • @humphreyangel7760
    @humphreyangel7760 5 років тому

    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.

  • @jacoposarti4785
    @jacoposarti4785 6 років тому +4

    Thanks kindly mate for this video, all developers on UA-cam 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.

  • @mapalochibwe7631
    @mapalochibwe7631 5 років тому +2

    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.

  • @haleemsafi3358
    @haleemsafi3358 6 років тому +52

    one of the best training I have learned a lot

  • @priyamganguly
    @priyamganguly 4 роки тому +3

    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
      @drewr  4 роки тому +1

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

  • @AguiaPC
    @AguiaPC 6 років тому +4

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

  • @kniscior
    @kniscior 5 років тому +1

    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

  • @Computer-Tutorials
    @Computer-Tutorials 6 років тому +33

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

  • @flashgamewalkthroughs5145
    @flashgamewalkthroughs5145 6 років тому

    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

  • @vuankhanhbeo
    @vuankhanhbeo 6 років тому +2

    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
      @drewr  6 років тому

      Hey thanks!

  • @osehiaseehilen5718
    @osehiaseehilen5718 6 років тому +2

    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
      @drewr  6 років тому

      Thanks Osehiase! That's great.

  • @rks1509
    @rks1509 4 роки тому

    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
      @rks1509 4 роки тому

      @@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

  • @mihirmehta2242
    @mihirmehta2242 5 років тому +8

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

  • @ammanh
    @ammanh 5 років тому

    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!

  • @pooriahonarmand111
    @pooriahonarmand111 6 років тому +28

    55:07 css starts

    • @marta_daria7
      @marta_daria7 5 років тому +4

      where is the part with the fixed image?

  • @ahmeds2278
    @ahmeds2278 4 роки тому +1

    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.

  • @successawuku-amador4403
    @successawuku-amador4403 6 років тому +19

    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
      @drewr  6 років тому

      Thanks I appreciate it!

  • @gregwalker2151
    @gregwalker2151 6 років тому +1

    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
    @mineturtle1841 5 років тому +34

    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;
    }

  • @shouravpaul263
    @shouravpaul263 6 років тому +2

    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...

  • @victorchiappetta330
    @victorchiappetta330 6 років тому +3

    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.

  • @arwahsapi
    @arwahsapi 5 років тому

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

  • @kevinzhang8974
    @kevinzhang8974 6 років тому +11

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

    • @drewr
      @drewr  6 років тому

      Awesome!

    • @XavierKickz
      @XavierKickz 6 років тому

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

    • @longpopy
      @longpopy 6 років тому

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

  • @pt8703
    @pt8703 3 роки тому +1

    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!

  • @Sapphiamur
    @Sapphiamur 4 роки тому +14

    You are amazing, thank you so much!!

  • @kristiyanivanov7414
    @kristiyanivanov7414 4 роки тому +2

    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
      @MultiPss 4 роки тому

      It works but the image does not scroll like the video

  • @xccraftcx
    @xccraftcx 6 років тому +14

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

    • @drewr
      @drewr  6 років тому

      Didn't see that coming - thanks!

  • @bsattechnology
    @bsattechnology 3 роки тому +2

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

  • @erikaalexandra22
    @erikaalexandra22 6 років тому +4

    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

  • @emmanuelmozart1134
    @emmanuelmozart1134 5 років тому +1

    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!

  • @asmaakhan5385
    @asmaakhan5385 6 років тому +3

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

  • @markbalazo1914
    @markbalazo1914 6 років тому +1

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

  • @grahamwang58
    @grahamwang58 6 років тому +6

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

  • @9450613592
    @9450613592 4 роки тому

    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

  • @marcostrevinorodriguez1254
    @marcostrevinorodriguez1254 5 років тому +4

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

  • @gtaseed
    @gtaseed 3 роки тому +1

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

  • @KasproGe
    @KasproGe 5 років тому +7

    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!!!

  • @lucydear7928
    @lucydear7928 5 років тому

    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.... :)

  • @steffanxavier
    @steffanxavier 6 років тому +4

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

  • @SAlmanKhanDev
    @SAlmanKhanDev 5 років тому

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

  • @rushabhpatel4291
    @rushabhpatel4291 6 років тому +20

    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
      @amitnavik 6 років тому +2

      problem with fixed image that cannot be displayed

    • @robertrydlewski9538
      @robertrydlewski9538 6 років тому

      @@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

  • @limu3749
    @limu3749 Рік тому

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

  • @dougui20
    @dougui20 4 роки тому +9

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

  • @jayantsapra6877
    @jayantsapra6877 3 роки тому +1

    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
      @drewr  2 роки тому

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

  • @sklepdaniela7876
    @sklepdaniela7876 5 років тому +6

    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" ?

  • @abdusamadabdusattorov8494
    @abdusamadabdusattorov8494 4 роки тому

    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 :)

  • @batuhangulgor5976
    @batuhangulgor5976 6 років тому +19

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

    • @drewr
      @drewr  6 років тому

      Thanks Batuhan! 😎 much appreciated

  • @chukwuperfect6813
    @chukwuperfect6813 5 років тому +1

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

  • @pureaccuracy3543
    @pureaccuracy3543 6 років тому +8

    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
      @ducbuihuynh6161 6 років тому

      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
      @kazeemkazeem3204 5 років тому +1

      @@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
      @finessecanada1167 4 роки тому

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

    • @finessecanada1167
      @finessecanada1167 4 роки тому

      @drewryan help mac.png

    • @kristiyanivanov7414
      @kristiyanivanov7414 4 роки тому

      same thing here, he didn't do it

  • @pola478
    @pola478 6 років тому +1

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

  • @ahtjohn2341
    @ahtjohn2341 6 років тому +24

    we need more & more & more tutorial like this

    • @ankitgirdhar2238
      @ankitgirdhar2238 6 років тому

      agreed!!

    • @saalleER
      @saalleER 6 років тому

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

  • @Phlyndor
    @Phlyndor 6 років тому +1

    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
      @drewr  6 років тому +1

      Thanks!

  • @robertthiel8154
    @robertthiel8154 5 років тому +3

    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!

  • @KevinBond2663
    @KevinBond2663 4 роки тому

    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.

  • @LearningToFly77
    @LearningToFly77 5 років тому +3

    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
      @DJPenta 4 роки тому

      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

  • @mikesedaghatnia3279
    @mikesedaghatnia3279 6 років тому +1

    Wow thanks man, people like you are rare nowadays.

    • @drewr
      @drewr  6 років тому

      Thanks!

  • @zwiebec78
    @zwiebec78 6 років тому +6

    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
      @TruthSeekerClub 5 років тому +3

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

    • @Bevallalom
      @Bevallalom 4 роки тому +2

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

    • @TruthSeekerClub
      @TruthSeekerClub 4 роки тому

      @@Bevallalom you're right

  • @michellejoymedez3481
    @michellejoymedez3481 5 років тому

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

  • @kinstar
    @kinstar 5 років тому +11

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

  • @bdcodex
    @bdcodex 4 роки тому +1

    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.

  • @ahtjohn2341
    @ahtjohn2341 6 років тому +7

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

    • @drewr
      @drewr  6 років тому +1

      Thanks dude!

    • @zakariaetatbat8921
      @zakariaetatbat8921 6 років тому

      can you send me the files please captain.desert@gmail.com

    • @rohansip1379
      @rohansip1379 6 років тому

      Drew Ryan can you mail me your entire source code file .....on acumen619@gmail.com.....i m not getting this tutorialz... Please send me your template with complete coding

    • @dubaijerryful
      @dubaijerryful 6 років тому

      To me as well bro. hameed.ibu@gmail.com

  • @misterjedu
    @misterjedu 6 років тому

    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.

  • @NewCeptionv2
    @NewCeptionv2 6 років тому +3

    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
      @drewr  6 років тому +5

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

    • @pritamparab
      @pritamparab 6 років тому +1

      Drew Ryan you are awesome

    • @rahuladepu2244
      @rahuladepu2244 5 років тому

      can i get the standard code plz

  • @andersonescobar1350
    @andersonescobar1350 6 років тому

    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 ¡¡¡¡¡

  • @NorlynCodes
    @NorlynCodes 5 років тому +3

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

    • @slayer3run
      @slayer3run 5 років тому +2

      we are still waiting

  • @juho-pekkaropelinen5317
    @juho-pekkaropelinen5317 5 років тому +1

    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!

  • @anandinamdar4054
    @anandinamdar4054 6 років тому +7

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

  • @silvadexter3222
    @silvadexter3222 6 років тому

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

    • @drewr
      @drewr  6 років тому

      Thanks! If you like this you should check out my later Bootstrap 4 video:
      ua-cam.com/video/Ht1F9KuhJO4/v-deo.html

  • @TriXoX1
    @TriXoX1 6 років тому +8

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

  • @mykalimba
    @mykalimba 3 роки тому +1

    12:30 If you're using Bootstrap 5, your menu items will not be right justified. To fix this, change the "ml-auto" class in the element to "ms-auto". You're welcome!

  • @Quand101
    @Quand101 6 років тому +6

    great video ... thanx

    • @zakariaetatbat8921
      @zakariaetatbat8921 6 років тому

      can you send me the files please captain.desert@gmail.com

  • @janbrand4782
    @janbrand4782 6 років тому +2

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

    • @drewr
      @drewr  6 років тому

      Thanks!

  • @olpner
    @olpner 5 років тому +6

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

    • @blackswordsman9745
      @blackswordsman9745 4 роки тому

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

  • @samessshrestha7357
    @samessshrestha7357 3 роки тому

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

  • @zulqarnainshah6047
    @zulqarnainshah6047 6 років тому +6

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

    • @al_barakah371
      @al_barakah371 6 років тому

      yes :/

    • @djspikeone
      @djspikeone 6 років тому +2

      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
      @tobiashoffmann1354 6 років тому

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

    • @zi59ghymdmnfghn
      @zi59ghymdmnfghn 6 років тому +5

      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
      @mikunico7144 5 років тому

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

  • @micahdittmar9072
    @micahdittmar9072 4 роки тому +1

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

  • @AbidAlWassie
    @AbidAlWassie 6 років тому +5

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

  • @HarmanpreetSingh-fw6ss
    @HarmanpreetSingh-fw6ss 2 роки тому

    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.

  • @harismalik4330
    @harismalik4330 6 років тому +6

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

    • @rajkoglisovic2615
      @rajkoglisovic2615 6 років тому +3

      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
      @jackfrost8969 6 років тому

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

    • @bantzrayder8976
      @bantzrayder8976 6 років тому

      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
      @zakariaetatbat8921 6 років тому

      can you send me the files please captain.desert@gmail.com

    • @ashiinsane90
      @ashiinsane90 6 років тому

      what about the HTML

  • @iqrauszud1513
    @iqrauszud1513 5 років тому

    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.

  • @finalfantasy7820
    @finalfantasy7820 5 років тому +18

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

  • @kakashiworld4872
    @kakashiworld4872 5 років тому +1

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

  • @Panossa
    @Panossa 4 роки тому +5

    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
      @valentinroux7448 4 роки тому

      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 :)

  • @Amankhan-cl1dq
    @Amankhan-cl1dq 4 роки тому

    Thankyou very much sir as a beginner I always get stucked when it come to use own stylesheet in bootstrap but your tutorial helps me a lot.

  • @bkatyayanoffice9658
    @bkatyayanoffice9658 4 роки тому

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

  • @mathewbryant1881
    @mathewbryant1881 6 років тому +1

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

    • @drewr
      @drewr  6 років тому

      Awesome! Glad this helped 😄

  • @AlexanderPerez-oe1gu
    @AlexanderPerez-oe1gu 4 роки тому

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

  • @wildhuntmedia5219
    @wildhuntmedia5219 6 років тому +1

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

    • @drewr
      @drewr  6 років тому

      Awesome, glad this helps! 😎

  • @syednoman84
    @syednoman84 5 років тому +1

    Top class effort by Drew Ryan. Very easy to follow and able to replicate the exact same design as mentioned in this video. The speed of the delivery and explanation at every step is super useful. Thanks a lot for sharing such a great video.

  • @gregoryfortune8863
    @gregoryfortune8863 5 років тому +1

    Thanks for this Tutorial, i stayed all night watching it. good job

  • @bilybabic
    @bilybabic 5 років тому +1

    Haven't seen your tutorials in a really long time :) really love what you do and the song in the beginning and at the end is soo catchy hehe :) keep up the good work

  • @thiravidan1
    @thiravidan1 4 роки тому +1

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