Design a responsive navbar using Bootstrap 5

Поделиться
HTML-код
  • Опубликовано: 18 авг 2020
  • Design a responsive navbar using Bootstrap 5

Комментарии • 82

  • @ilkrsrc081
    @ilkrsrc081 3 года назад +1

    Everyone I see in the videos uses the very first nav-bar, I'm just wondering does bootstrap have any other nav-bar at all? Because I can't see in the site also, how can that be?

  • @Transcode
    @Transcode 3 года назад +2

    Th navbar looks great! Thanks for this great informative video👏

    • @careerandtechhq
      @careerandtechhq  3 года назад +1

      Thanks @Transcode for your kind words 🙂

  • @zachfenton608
    @zachfenton608 3 года назад +1

    So how does it work with all the pages do i have to import the same bootstrap into evey html document and how does it work if i add a page, does it update itself?

  • @amirhamzah2256
    @amirhamzah2256 2 года назад

    where can I get all the bootstrap code like "ml-auto" or "navbar-expand-lg"? and do you memorize most of the bootstrap code ?

  • @wedepohl
    @wedepohl 3 года назад +3

    Great tutorial.
    Do you know of any multi-level navbars using Bootstrap 5 or any pointers that I can get on how to write one myself?
    I thought just by putting a drop down within a drop down it would work but it just closes the opened menu on both mobile and desktop.
    I can find multi-level navbars for Bootstrap 4, but they all use jQuery and I'm trying to get away from that.

    • @careerandtechhq
      @careerandtechhq  3 года назад +3

      Hi, thanks for watching !!!!
      I have yet to make a video on multi-level navbars on the channel. But I guess you can find the code on Bootstrap 5 website getbootstrap.com/docs/5.0/components/navs-tabs/

    • @careerandtechhq
      @careerandtechhq  3 года назад +2

      Navbar



      Home

      Link

      Dropdown

      Action
      Another action
      Something else here

      Disabled


      Search

    • @wedepohl
      @wedepohl 3 года назад

      ​@@careerandtechhq
      Thanks
      I will do some investigation ...
      I was using Bootstrap 3 with jquery.smartmenus.bootstrap.js library, but wanted to move away from jQuery
      My application has multi level dropdowns since Bootstrap just provides a quick framework for a backend database
      Main Dropdown 1
      Dropdown 1
      Dropdown 1-1
      Dropdown 1-1-1
      Item 1-1-1-1
      Item 1-1-1-2
      Item 1-1-1-3
      Dropdown 2
      Dropdown 2-1
      Dropdown 2-1-1
      Item 2-1-1-1
      Item 2-1-1-2
      Item 2-1-1-3
      Will let you know how it goes

  • @MYWAYDIGITAL
    @MYWAYDIGITAL 3 года назад +2

    Perfect explaind this topic! I am really satisfied to got this info! Thanks 😊!

    • @careerandtechhq
      @careerandtechhq  3 года назад +2

      Thanks for viewing

    • @MYWAYDIGITAL
      @MYWAYDIGITAL 3 года назад

      @@careerandtechhq you are welcome! Thanks for you effort!

  • @iamtbexz1265
    @iamtbexz1265 Год назад +2

    a great video, but i have some problem, my nav link font style doesnt change

  • @jubairjubu4411
    @jubairjubu4411 2 года назад

    can you do a tutorial about double navbar(side navbar)

  • @prajalsaxena775
    @prajalsaxena775 3 года назад +1

    Hello sir. When I'm writing bootstrap navbar code in body, the output is not coming horizontally.. it's not proper. Please tell

  • @MuhammedAtl
    @MuhammedAtl 11 месяцев назад +1

    Although I wrote the codes in the same way, I could not run them, can you help?

  • @danielrico3352
    @danielrico3352 Год назад

    Thanks a lot for the video! It was very helpful!

  • @geoffr57
    @geoffr57 3 года назад

    I have downloaded this navbar about three times but have never managed to get it looking Horizontal, it is very frustrating. It always comes out vertical, can anybody help please.

  • @diegoestrada1552
    @diegoestrada1552 3 года назад +2

    I tried to make it, and I put exact the same code, except de part of the font-family, but it didn't work:( And yes, I used bootstrap 5.

  • @sheilamariegasatan3684
    @sheilamariegasatan3684 2 года назад

    i cant make it work i dunno what is lacking on mine I just copied the code on bootstrap where did those import shit come from?

  • @Raio_EL
    @Raio_EL 3 года назад +2

    Can we have the source code please?
    so we can quickly try if this is working.

  • @sukumarsanu7169
    @sukumarsanu7169 3 года назад

    why is the dropdown menu not working, for bootstrap5?

  • @DavidAshby1
    @DavidAshby1 3 года назад

    Thanks for the tutorial, with the tip from Yasmine dib I solved most things however when you change the link color, that doesn't work for me. Obviously things are changing all the time as the team at Bootstrap update. I am using the latest version, which at the moment is v5.0.0-beta3 and I cannot find any information regarding the way to change the link text colour in the Bootstrap navbar for this version.

    • @DavidAshby1
      @DavidAshby1 3 года назад

      Solved it, I had left the navbar-light bg-light in the

    • @bichiousouheil3156
      @bichiousouheil3156 2 года назад

      did you find a solution ??

    • @DavidAshby1
      @DavidAshby1 2 года назад

      @@bichiousouheil3156 Yes thanks. As above it was my error

  • @ketakibhosale7615
    @ketakibhosale7615 2 года назад

    Sir can you plz tell me one thing ?? In CSS you import 2 url in first 2 lines, in that what is 1st url ? Actually half part of that url is in un scrolled . plz sir can you reply me that 1st url😊

  • @sergeypashkov2983
    @sergeypashkov2983 2 года назад

    Thank you, it is very helpful. But what if we need to show “Get a quote” button on a small screen, without clicking the burger button, does anyone have a suggestion for this layout?

    • @sergeypashkov2983
      @sergeypashkov2983 2 года назад

      I placed the "burger" button on the left and the "quote" button after the "collapse" div.
      It looks fine, but the "quote" button is moved to the bottom of the menu once it is opened.
      A button placed before the "collapse" div looks good on a small screen but obviously not ok for a large screen.
      So I created two buttons - for small and large screens, works fine, but maybe there is a cleaner solution

  • @samuelillouz4979
    @samuelillouz4979 2 года назад

    thks !!!
    did u put the code on github ?

  • @WatIsbiz
    @WatIsbiz 3 года назад +1

    Superb tutorial! Thanks a lot!

  • @hasibdevs
    @hasibdevs 2 года назад

    You are really badass guy.... Fully badass video 🤬

  • @mauliadianti
    @mauliadianti 3 года назад +3

    thankyou this help me solve the problem :) before this, my collapse won't show anything then I realize I didn't read the note bootstrap left in bootstrap 5 to include the js file hahaha :(

  • @MbougueNobel
    @MbougueNobel 3 года назад +1

    You were so helpful man

  • @meganstevenson2499
    @meganstevenson2499 2 года назад +2

    Does anyone know why I am unable to change my text color? I have followed the above tutorial but it is still blue?

    • @iamtbexz1265
      @iamtbexz1265 Год назад

      I am also having the same problem

  • @darshankothari7180
    @darshankothari7180 2 года назад

    how can we add logo and please
    a size of the logo

  • @ChatmansBow
    @ChatmansBow 3 года назад +1

    Thanks informative video 👍

  • @riteshkumarpandey1953
    @riteshkumarpandey1953 2 года назад

    Sir, nothing changes showing after using justify-content-between and mr-auto

    • @riteshkumarpandey1953
      @riteshkumarpandey1953 2 года назад

      now its working when i using ms-auto to send rightside. i don't know but this is working

  • @theboxtheboxeslastname1456
    @theboxtheboxeslastname1456 3 года назад +1

    Great video

  • @vrnel
    @vrnel 3 года назад +1

    How can I align the links to the center and searchbar to right?

    • @careerandtechhq
      @careerandtechhq  3 года назад +2

      You add a bootstrap class ms-auto in the ul tag like
      Or you can watch this other video I made with an example on how to do that ruclips.net/video/h2jVZ8ans_o/видео.html

    • @vrnel
      @vrnel 3 года назад

      @@careerandtechhq great, thank you

  • @aresth8862
    @aresth8862 3 года назад

    how to get the pooper link?

  • @rodri9972
    @rodri9972 3 года назад +1

    Tremendously helpful

  • @nursebondemcanada
    @nursebondemcanada 3 года назад +3

    I tried an online course on coding but I hard so many difficulties

  • @damiengravelle4741
    @damiengravelle4741 2 года назад

    your video is usefull thank you

  • @naturalhealthremedy6
    @naturalhealthremedy6 3 года назад +1

    Love it! New friend here! Subscribed. Let’s stay connected 🙌❤️👍🔔

  • @msdzgn
    @msdzgn 3 года назад

    thanks bro..

  • @naheliegend5222
    @naheliegend5222 3 года назад +3

    div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
    does not work with margin left

    • @jevalaggaantamilalagan6111
      @jevalaggaantamilalagan6111 3 года назад +2

      Instead of ml-auto use ms-auto

    • @ADesignerWhoCodes
      @ADesignerWhoCodes 3 года назад

      margin-left is now margin-start to account for RTL and LTR. ml has changed to ms

    • @Dianaa
      @Dianaa 3 года назад

      @@jevalaggaantamilalagan6111 thanks

  • @eduardogoncalvesdossantos4323
    @eduardogoncalvesdossantos4323 Год назад +1

    Why so many CSS?! Bootstrap can do all of this thins!!!!!

  • @zindagidopalke------4777
    @zindagidopalke------4777 Год назад +1

    Good job sir but upload code sir

  • @jubairjubu4411
    @jubairjubu4411 2 года назад

    would you like to provide the source code

  • @PeggyJafari
    @PeggyJafari 3 года назад +3

    Hello new supporter from Jillians face book page...

  • @failpubgvedio8383
    @failpubgvedio8383 Год назад +1

    Love you😘❤

  • @gopalakrishnan9835
    @gopalakrishnan9835 Год назад +1

    instead of ml auto use ms auto in bootstrap 5 version

  • @kamalsaxena1384
    @kamalsaxena1384 3 года назад +1

    Sir, bootstrap 5 complete tutorials with examples

    • @careerandtechhq
      @careerandtechhq  3 года назад +1

      Hi @KAMAL SAXENA , thanks for reaching out. We will look into that🙂

  • @techgeneration2051
    @techgeneration2051 2 года назад

    Can you share source of code

  • @promisbasunia6594
    @promisbasunia6594 3 года назад +1

    nice

  • @udarachinthaka7211
    @udarachinthaka7211 Год назад +1

    source code please

  • @abdullahshiekh880
    @abdullahshiekh880 2 года назад

    can u put source code plss?

  • @thiagosoria4513
    @thiagosoria4513 11 месяцев назад +1

    Likeado lince

  • @albertbonar3621
    @albertbonar3621 2 года назад

    source code?"

  • @jillianpattel5121
    @jillianpattel5121 3 года назад +1

    import url ??? in Css code