Build A Landing Page using Bootstrap 5 | Full Step by Step Tutorial

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

КОМЕНТАРІ • 126

  • @Mdbootstrap
    @Mdbootstrap  2 роки тому +8

    I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video!
    I don't run ads on tutorials - the only value I get is your engagement in the MDB community.
    So if you would like to show your support:
    - Encourage more people to Keep Coding ---> Send this video to one person
    - Stay tuned for new content ---> Subscribe & ring the bell
    In the description, you will find links to some useful, free resources:
    📥 Download Material Design for Bootstrap - FREE open-source UI KIT
    🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course)
    🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall)
    ⭐Support the creation of open-source packages with a STAR on GitHub
    👪 If you have any questions - don't hesitate to ask on our Facebook group
    Thank you for your support!

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

    Really great to see practical coding examples for BSv5 as a newbie. Totally got into using BS more now! Thanks for sharing.

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

    This might the most useful bootstrap toturial on youtube. Thanks a lot.

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

    Oh C'mon guys, David has been giving his best doing these tutorials for free to humanity, If you don't like it, don't watch it, but never the thumbs down hoolagoons please...

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

      Dear Mike, I appreciate your support, I really do!
      It seems that we have just 14 downvotes VS 672 upvotes by now so it's quite optimistic :)

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

    this is best level of training ,
    i appreciate it.

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

    this is the easiest Bootstrap Tutorial i've seen. found it so easy to understand. Thank you

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

    Thank you, this is one of the tutorials with the biggest added value I have seen in the last years.

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

    Great content, we are using this at work right now.
    Just a heads up though, the js folder from your repository seems to be out of date ;P

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

    I am watching this tutorial again cause it's very informative for someone like me, a behind the firewall dev

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

    That was so simple to follow, and you literally make it an amazing journey ! Thank you so much

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

    this was very much needed thanks

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

    best video of bootstrap5 for beginners.

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

    Fantastic tutorial sir.

  • @IbrahimKhan-oi3mg
    @IbrahimKhan-oi3mg 3 роки тому +2

    This is amazing! thanks.

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

    Good tutorial. Thank you very much, it helped me a lot.

  • @DavidHakobyan
    @DavidHakobyan 10 місяців тому

    Good tutorial. Thank you!

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

    This is the first time I saw your video and it was really helpful and you make it quite easy for me
    Thanks sir ❤️

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

    Liked this video so much. Thank your sir!
    It was a good tutorial for me as a beginner!

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

    Thank you very much, it is easy to learn. Wish you a happy life.

  • @SandroMassarani
    @SandroMassarani 2 роки тому

    This was a great tutorial, learned a lot. Thank you very much!!!

  • @scottgeithman8648
    @scottgeithman8648 2 роки тому

    Thanks for the video, was very helpful!

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

    I learned so much of bootstrap usage. I really want to dive right into the second part of this tutorial. Where is the next video? I can't find one.....

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

    it's very helpful sir, thanks

  • @jameskalenga7546
    @jameskalenga7546 2 роки тому

    Learned a lot. Thanks for sharing your skills

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

    thank you! this was very helpful for me to understand bootstrap and the styling :)

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

    Nice tutorial, thanks

  • @OscarRomanpe
    @OscarRomanpe 2 роки тому

    Thank you, sir. Your tutorial was really easy to follow and I enjoyed it a lot!

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

    awesome video thank you!

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

    Thank you very much. I follow the whole video and able to learn all the tricks.
    The footer might contain a typo. Kindly check.

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

    Thanks for the great tutorial. I might as well point out that something seems to be wrong with your JS folder or files. Cuz the navbar doesnt expand when I use your JS but downloading bootsrap from their website and using the JS folder in the newly downloaded bootstrap does work properly.

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

      I've just checked that and it works like a charm, please use following files and check console in case of any errors: github.com/mdbootstrap/Bootstrap-5-Landing-Page-Tutorial

  • @matelu75
    @matelu75 2 місяці тому

    thank you very much, awesome tutorial, awesome channel, keep it up guys!!!

    • @Mdbootstrap
      @Mdbootstrap  2 місяці тому

      Thank you for your kind words :)
      Keep Coding!

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

    Brilliant tutorial.

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

    Thanks you so much for this great tutorial

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

    Great, thank you very much!

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

    Wow! What a website!

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

    sir! could you create a udemy course for beginners! i am to binge watch this really these days!

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

    Super useful!

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

    Great tutorial. You made it all look dead easy. How did you enter an image into every row at the same time at 17m 45s and the second method at 39m 15s?

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

      Keep ALT pressed and click in multiple places. This is called multicoursor

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

      @@Mdbootstrap thanks. My bullet points for the section at 22m are slightly higher than the text. Any ideas why?

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

      @@joshcollins9125 We could help if you show us your code. Create your snippet here and send us a link :) mdbootstrap.com/snippets/

  • @ismailufadal1549
    @ismailufadal1549 2 місяці тому

    Hi, Great tutorial. Where can I download full tutorial with all bits and pieces. I would like to practice. Thank you

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

    Thank you for a great tutorial, I just wondering about why you sometimes create own classes when you could use a Bootstrap class instead. Do you have some recommendations about when to do so?

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

      I ma trying to mix education (how to do something on your own to understand how it works) with use of existing methods. Usually I show how to achieve something once u understand that and then, I just reuse existing methods :)

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

    Hello sir your Tutorial videos are really amazing , just one question i want to ask what's the difference between Bootstrap and Material Bootstrap

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

      Material Design for Bootstrap (MDB) greatly enhances the abilities of regular Bootstrap and provides many extra features ;)

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

    Thank you !

  • @kalppatel3435
    @kalppatel3435 2 роки тому

    Totally loved it thank you sir😍😍

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

    Thank you 💛💚💙💜🖤

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

    this is fantastic brother.
    i really thank you soo much.

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

    Good fast beautiful .do more

  • @scottgeithman8648
    @scottgeithman8648 2 роки тому

    You should have just gathered all the font sizes, colors, and other html elements and used bootstrap generator to build with all desired styles first and you will be half way done. Then go about adding your custom stuff.

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

    Hi David. I want to ask why you don't use classes like ".text-white .rounded-circle .d-inline-flex .justify-content-center .align-items-center" for element .icon?

  • @kasperkat2004
    @kasperkat2004 2 роки тому

    😊 I really appreciate this !

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

    one million view video perfect man

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

    thanks a lot man !

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

    Thanks this is really helpful

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

    Love it. Thank you

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

    Can you tell me where you get business, marketing svg photos from? Thanks in advance.

  • @sugekanu6163
    @sugekanu6163 2 роки тому

    This is beautiful but I'm having an issue. CSS utility terms are not working for me. E.g; justify-content-center.
    However, flexbox utility terms works but I prefer grid to flexbox.
    What am I doing wrongly?
    Thanks again for this beautiful tutorial.

    • @Mdbootstrap
      @Mdbootstrap  2 роки тому

      Thanks for letting me know about the issue.
      Let me move this conversation to the forum, please create a ticket here:
      mdbootstrap.com/support/
      It's much easier to solve issues there instead of the YT comment section.
      You can specify your device, browser, OS and above all, you can add a code snippet if you need.
      Me or one of my colleagues will do our best to help you out.
      PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

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

    Inspiring

  • @BadGirl-pn3qu
    @BadGirl-pn3qu 3 роки тому

    Thank you so much!

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

    Thanks for sharing love.

  • @wakilahmed2704
    @wakilahmed2704 2 роки тому

    The link to the starter file isn't working. I would be grateful if you could look into the issue.
    Thank you!

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

    Hi, what do you press to make code to stand in right tabs/spaces?

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

      Tabs (though spaces are also ok)

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

      @@Mdbootstrap I already got the info (Alt + Shift + F).

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

    Thanks for code running...

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

    When I set margin to page header it moves gradient, image, and text ?

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

    New suscriptor

  • @jason-bacalla
    @jason-bacalla 3 роки тому

    Why SVG picture not working this animation picture from manypixels?? only 1 size they can't stretch

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

    I am stuck at the navbar itself, when I click on the options or the button itself, the menu does not dismiss. I had to use jquery.

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

    Hi @
    Keep coding, This is an awesome tutorial. I like it. I have a query. Please help me to resolve.
    In mobile screen, there are some borders displaying for the wave svgs. Can you please suggest how to remove those ?

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

      Hello, Let me move this conversation to the forum, please create a ticket here:
      mdbootstrap.com/support/
      It's much easier to solve issues there instead of the YT comment section.
      You can specify your device, browser, OS and above all, you can add a code snippet if you need.
      Me or one of my colleagues will do our best to help you out.
      PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

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

      Is there a ticket on this? I get the same thing.

    • @Bimal_Behera
      @Bimal_Behera Рік тому +1

      @@peproni379 no I guess. I don't remember why I didn't raise, but I think I got some issues or something else, then I ignored this one.

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

    thank you

  • @coversongs7471
    @coversongs7471 2 роки тому

    Hallo.
    Can you recomend extension for vscode. Cause im new using vscode. Thank you

    • @Mdbootstrap
      @Mdbootstrap  2 роки тому

      In this video you will find 10 VSCode Extensions - ua-cam.com/video/fh97jo6Xur8/v-deo.html

    • @coversongs7471
      @coversongs7471 2 роки тому

      Ok. Thank you

  • @Bravin_Joshua
    @Bravin_Joshua 11 місяців тому

    So development is just understanding what you copy and paste and what you google

    • @Mdbootstrap
      @Mdbootstrap  11 місяців тому

      As much as sarcastic your comment is: This is a great way to learn if you're a beginner or intermediate.

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

    services section not responsive !

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

    What should I do if my file doesn't load an image from folder?

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

    How to set size of Waves ????? please reply

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

    why my interface in browser isnt turn out like yours? it only load the basic html. would be glad if theres anyone who would help

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

      Please post question on our facebook group : facebook.com/groups/682245759188413

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

      It might sound silly but have you checked if your link to your stylesheets is correct? I always check that first when I have that issue. All the best.

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

      @@ktmalex it'd solved already, but thank you so much for your help!

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

    The image pack doesn't download. please convert your link

  • @lxonthemix834
    @lxonthemix834 2 роки тому

    how do i increase the logo size?

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

    why is my header is extended its space to the nav bar?

  • @mdnazmussagirshovon
    @mdnazmussagirshovon 2 роки тому

    Can anyone give me the link of this website that shows on video?

    • @Mdbootstrap
      @Mdbootstrap  2 роки тому

      It's in the description

    • @mdnazmussagirshovon
      @mdnazmussagirshovon 2 роки тому

      @@Mdbootstrap I couldn't find the right one . please give me the link. I cheak out all the links bt it doesn't work 😮‍💨

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

    Project Source Code link not working...Update Please.

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

      It seems to work fine: github.com/mdbootstrap/Bootstrap-5-Landing-Page-Tutorial

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

      @@Mdbootstrap Thank you!

  • @alaeen2675
    @alaeen2675 2 роки тому

    the hamburger menu dose not work I did included the js file

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

      Thanks for letting me know about the issue.
      Let me move this conversation to the forum, please create a ticket here:
      mdbootstrap.com/support/
      It's much easier to solve issues there instead of the YT comment section.
      You can specify your device, browser, OS and above all, you can add a code snippet if you need.
      Me or one of my colleagues will do our best to help you out.
      PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

  • @moh.syafrianabie8899
    @moh.syafrianabie8899 2 роки тому

    1:00

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

    I like men

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

    Thank you!

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

    Thanks for your tutorial. 🎉