bootstrap admin dashboard tutorial

Поделиться
HTML-код
  • Опубликовано: 6 апр 2021
  • bootstrap admin dashboard tutorial
    In this video we will be creating the bootstrap admin dashboard template using latest version of bootstrap 5. we will build the simple bootstrap admin dashboard template which is responsive.
    we will be using bootstrap 5 offcanvas component, to make the sidebar menu responsive.
    Please Subscribe:-
    / @chandraja2010
    Happy Coding :D
    Bootstrap 4 Theme Customization using SASS | SCSS
    • Bootstrap 4 Theme Cust...
    Web development | HTML | CSS | SCSS | javascript Tutorials
    • web development | HTML...
    Social Media Icons Animation
    • social media icons htm...
    Pure CSS Loading Animation
    • html css animation
    Bootstrap 4 Tutorials
    • Bootstrap 4 Tutorials
    #frontendfunn
    #webdevelopment
    #css3
    #bootstrap5
    #html5
    #javascript
    👉 Code Link github.com/frontendfunn/boots...

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

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

    Thank you so much for this amazing tutorial. You don't know how much you helped me. I was so frustrated by the admin panel out there & having to integrate inside my project is far from easy. So i thought i will make for myself a simple admin panel & your video is the best one. Thank you.

  • @shielalucas844
    @shielalucas844 Год назад +4

    You made it easier to understand with your tutorials. Keep up the good work! Thank you so much! 😍

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

    Thanks a lot. You made this adaptable even after 1 year.

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

    thank you so much to this tutorial. I learned a lot of this, and I already used this template.

  • @umeshsurange4604
    @umeshsurange4604 3 месяца назад +1

    I used bootstrapp for many times. but by checking this video I learn more.. thank you so much!

  • @AnaMaria-ul9qk
    @AnaMaria-ul9qk 2 года назад +2

    Thank you very much, your tutorial is very useful for me! I am so happy ♥

  • @ahmedabdulhamid4716
    @ahmedabdulhamid4716 2 года назад +1

    It is very helpful for me and it is answering all the questions in my mind, I am so happy to watch your wonderful video, big thanks

  • @BangBob666
    @BangBob666 2 года назад +1

    Very clear. Thanks for the video dude.

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

    this is what I looking for, thank you so much!

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

    Thank you very much! You made our learning easier!

  • @jaketugade5911
    @jaketugade5911 Год назад +3

    was a life-saver. Thanks a lot.

  • @tomasliendo3127
    @tomasliendo3127 Год назад +3

    Goooooooood Job =D , Thank you very much !!!!! Greetings from Argentina.

  • @kreaweb-be
    @kreaweb-be 2 года назад +7

    Nice tutorial. But wouldn't it be better to create a toggle button for the off-cancas menu on large and medium screens so the menu is reduced to a small width menu showing only the menu item icons?

  • @oybekmuxtaraliyev
    @oybekmuxtaraliyev 3 месяца назад +1

    Thanks bro. It has been very beneficial for me

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

    this ones fastastic.. 👌, thank you sir.

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

    Very helpful. Thank you very much!

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

    Awesome, Good job!!!

  • @YANTI-rj4po
    @YANTI-rj4po Год назад +2

    Nice tutorial, Thanks...

  • @TechMainul
    @TechMainul 2 года назад +1

    Thank you so much

  • @kazalghosh5598
    @kazalghosh5598 2 года назад +1

    It is very helpful tutorial..

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

    Thank you very much sir:))

  • @LNMLucasMasiero
    @LNMLucasMasiero 2 года назад +1

    Thans you so much!

  • @miltonhonji5567
    @miltonhonji5567 2 года назад +1

    Thank you.

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

    Thanks!!!

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

    Nice work

  • @harikrishnan-pr6qk
    @harikrishnan-pr6qk 3 года назад +3

    Excellent teaching. Great video

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

      Thank you hari, thanks for the support.

  • @themevia562
    @themevia562 2 года назад +1

    Nice job

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

    thank you very much . very helpful

  • @khaledahmed-wq5qq
    @khaledahmed-wq5qq 3 года назад +1

    Thanks for sharing!

  • @ervisfrend
    @ervisfrend 4 месяца назад

    Thank you

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

    ice its actually working, im suprised

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

    Its Very GG gaming 🤙

  • @nalsempai9792
    @nalsempai9792 2 года назад +1

    Thank you

  • @thambirajahsritharan7817
    @thambirajahsritharan7817 2 года назад +1

    wesome, Good job!!!wesome, Good job!!!wesome, Good job!!!

  • @melaniemurday3138
    @melaniemurday3138 11 месяцев назад

    great video

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

    HI. nice tutorial. But is it necessary to add media query in css? Instead can't we use the css classes?

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

      Using the media query I am just trying to override the default behavior of the offcanvas. Offcanvas are hidden by default, we are making it visible on large screens. If bootstrap provides the utility classes for those rules you can use it.

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

    Firstly, Thanks for sharing the good video. Can I ask you, How to change the main page dynamically? for example if i click 'table' menu on the side bar menu, it will change the page just show table page? Thanks

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

      Hi zalik, if you are using a library like react.. you can add the switch - route to display the pages based on the url..
      If you are still unclear please let me know I will try to make a video on how to integrate it with react or vue
      Thanks for the support. Happy coding.

  • @user-vi7fg8fb8u
    @user-vi7fg8fb8u 10 месяцев назад

    Mantapsss goods

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

    ThankYou!!!!!!!!!!!!!!!!

  • @Sanatani-Jay-shree-Ram
    @Sanatani-Jay-shree-Ram 7 месяцев назад +1

    wow thank you so much. If I use this source, there any copyright issues.

    • @chandraja2010
      @chandraja2010  7 месяцев назад +1

      Not at all. You can use it and also customise it to your needs.. happy coding

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

    Sir thank you so much for this wonderful tutorial. Sir I have a question >>> Just after the brand name I have created a dropdown, which hides behind the sidebar after dropdown. Please sir suggest some solution.

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

      Hi Manish, please provide the git repo of your code so that I can inspect and check it.

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

      @@chandraja2010 github.com/mpritamp/adminDashboard.git
      Sir check on Subject dropdown

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

      Hi Please check the issue tab on your repo. if still any issue please ping me here. Thanks for the support. Happy Coding

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

      @@chandraja2010 Thank You so much sir, Issue solved.

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

      You are welcome. Thanks for the support. Happy Coding 😃

  • @peterpiper8205
    @peterpiper8205 2 года назад +1

    Okay here is my question how make the other nav-link clickable and redirected to other panel?
    In every tutorial, I notice that they only showing what's inside the dashboard How about the other nav-link like for example [setting][about][etc]?

    • @chandraja2010
      @chandraja2010  2 года назад +1

      Can you provide more info ? What is the exact use case

  • @YASSINEElMENANI
    @YASSINEElMENANI 9 месяцев назад

    hello sir i hope that you will see my comments i don't know why when i did like you in the css of the sidebar-nav its not working for me like that he is work for you and have tride every soltion that i know

    • @chandraja2010
      @chandraja2010  9 месяцев назад

      Please provide github repo link if possible so that I can look into your code and help you

  • @afzfun451
    @afzfun451 9 месяцев назад

    Please can you tell me what extenion you are using on your chrome to check screen sizes ? please tell me the name of extension i will be thankful. thanks

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

    one year and a half after this video, i trying to do this. I have a problem for show the nav with >992px screen : the navbar is not shown :( there was an update of bootstrap and i need to fix it ? but i'm a beginner and i don't find the problem. Someone did it ? tks !

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

      Repo link is in the description. Please refer the repo. Still having issue please ping me here. I will be happy to help.

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

    I couldn't find the dataTables file in the Bootstrap CSS and Js file i downloaded, am i missing something pls?

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

      Data tables is a seperate library.. please check the repo link down in the comments section..

  • @maikelm20
    @maikelm20 2 года назад +1

    What extension do you use for tag highitling?

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

      marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
      this is the extension, tweaked it to my need 😊

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

    do we need to include - jquery.dataTables.min.css ??

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

      Hi krunal, please refer the git repo. Link in description. Thanks 👍

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

    I can't find the css/dataTables.bootstrap5.min.css file on the Bootstrap website. Can you please tell me where to get this file? Thanks!

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

      Data tables is a third party library.. it is not part of bootstrap.. please read the readme section or the repo.. I have provided the links to list of components and libraries used in this project..
      Thank for the support. You can ping me here if any issues. Happy coding

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

      @@chandraja2010 Yup, I found that out right after I posted the question. Thanks for the help and keep up the great videos!

  • @bulbasky1678
    @bulbasky1678 2 года назад +1

    Hi sir, I am new here. Can I ask how to add the yellow line to group code navbar? It shown on 4:16. Thank you

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

      It's vscode plugin.. highlight matching tag .. customized a bit to my need ..

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

    hi sir, what extension do you use to sort html tag like
    to

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

      Prettier - code formatter
      Search for this extension in market place and enable it as default formatter

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

    Guys where is the chart i am little confused about that part i cant seem to find chart in bootstrap is something wrong someone help me...?

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

      Hi abdi, charts are not available in bootstrap.. you need to use an external library like .. chart js.. for the charts..

  • @ayushpandey3719
    @ayushpandey3719 2 месяца назад

    Sir off canvas css are not working .Why?

    • @chandraja2010
      @chandraja2010  2 месяца назад

      Check developer console.. let me know if you have any console errors

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

    Bro.. Please help me.. Apex chart is not showing in my project😢

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

      Hi priyanka , Please provide the repo link.. so that I can help you..

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

      Bro.. Please give me ur mail bro...

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

      Hi Priyanka, here is the id frontendfunn@gmail.com

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

    the resizing of offcanvas is not working bro

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

      Hi Carlos, GitHub link is available in description. Please refer the repo.

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

    Sir, ecommerce website project

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

      Hi DevKamal, please provide any reference of the ecommerce website, will try to make one. Thanks for the support. Happy Coding 😊

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

    GitHub project?

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

      forgot to add the repo link. Video description is updated, Please Check.. Thanks for the support.

  • @mrlongmasternguyen6454
    @mrlongmasternguyen6454 2 года назад +1

    Thanks!