Design a responsive navbar using Bootstrap 5

hi and welcome back to this channel in today's video i'm going to show you how to design a responsive navigation bar using bootstrap version 5. so make sure that your project directory is set up correctly and containing the various necessary bootstrap version 5 folders and files for example here i have the css file containing my bootstrap.css and then the js file containing the bootstrap.js file so here i have with all the necessary links okay this is the link to the bootstrap.css file down here is the link to my style.css okay the file where i'm gonna write all my css code so down here is the javascript links so as you can see here i have the bootstrap.js file as well so as i said at the beginning we are going to design a responsive navigation bar using bootstrap framework so the first thing i'm going to do is to write a header tag i'm going to give it a class header like this and inside this header i'm going to copy and paste the nav bar code that i will copy from the bootstrap version 5 website so come to the bootstrap version 5 website click on docs and then click on components down here scroll down then click on nav bar and then if you scroll down here you can see the various code so we are going to copy this very first code here copy and then i will paste it inside the header tag like this then save so let me refresh the page tata as you can see here i have the nav bar based on the code i just copied from the bootstrap version 5 website okay so now i am going to customize this particular code in order to give us um a customized navigation bar so now class nav friend here i'm going to change this to code in reverse so this is actually representing a logo okay if you had a picture of your logo you could add an image tag here and then link your image your logo inside here but here i'm simply going to use some text and i'm also going to use a special font to make these text different from the other text in this navigation bar so the second one is the button okay now button here so continuing the button this is the toggle button or the burger button whenever we reduce our our website okay you can see that we have this burger menu button here okay so in order to get that we always have to make sure that this target data target um class is the same as this id in our collapse class here okay so i'm gonna keep these two like this and uh here i'm going simply going to remove this then copy and paste this i'll add another class here i'll say justify content between so this is actually to make sure to separate the components in the nav bar you know here i have the logo the brand and then the navigation bar items so it did not work or what am i going to do here is to here instead of making a margin right i'm gonna say margin left auto like this okay as you can see now i have the margin left here based on what i specified okay so i guess i'm good to go um for here i'm simply gonna change this oh i'm gonna leave it to home like this the second one will be blog third one i'm gonna say services so just as an example i'm going to leave this like this and i will remove this one copy this paste paste like this copy the drop down item i'll paste it down here then i will also copy this again and press it down so i'll say customers purchase pricing and then the last one will be contact us i will say so this form here is representing the button and then the search box as you can see here um i'm going to remove that i simply need a button so i will say ul class i'll give it the same class as the other navigation items i think it was not bar enough yeah so this same class i'm going to use it again in for this pattern so the number now and i'm also going to give it a margin left auto and inside i'm going to write a button tag i'll give you the predefined bootstrap button class and here i'll just say get a quote then save if i come here so here we have the logo here we have the various navbar items and here we have our button so as you can see here we have the separation here because we specified the margin left as auto and here also we specified margin left auto i think everything is good to go now so it's now time to style our css part let me start with the generic tags so i'll say html body font family uh so i would say pop ins okay so poppins is the first time at the first google font we imported here so i'm gonna use it throughout my uh web page so font size would say 15 pixels in general uh line height or 1.5 i guess it's okay box sizing for box margin 0 overflow c then and top will be zero and left will also be zero after that i will style the a tag so i will say text decoration none the color 54 comma 69 font weight will be 500 and here a hover will say color of the text so this is the text color i'm going to use so now let me come and refresh so as you can see the text color has changed and also when i put my cursor on the text on the link its color is changing all right so let me now style the unordered list so list style list is type none then after that the first class i'm gonna start with the navbar class so i'll say background white put in its height will say zero and its minimum height so let me save so this nava class is actually the first class we have in our html code here okay so this is the class that we are styling let me come down here and see what happens okay so all the styling has taken effect on our web page so now i need to style the next class which is the nav bar brand so that's a navbar navbar brand so say pattern display block text decoration and all right then save so i'll say navbar run by itself i need to give it um a different font family i imported two font families so this is the phone family i'm gonna give to my nav brand so this is it i'll say press c fico i'll say font size 2.5 another color let me refresh and see what happens all right so now this is the nav brand our brand or the logo i now need to style the navbar toggler let's say background this color border none pattern and then the outline let's say none so in order to see the effect as you can see here so the burger icon has changed all right so now i'm going to style the nav bar tuggler spawn tag says fun so display block border we will say one pixel and then background all right simply save copy this paste so do seconds tag if you remember we put three spine tags here so we're gonna do for the second spawn so we say margin top imagine left so we do for the third spawn as well let me remove this so in here we will simply say weight 10 pixels and margin left 4 pixels we refresh that that as you can see here is i guess i need to change this margin left i can like this so the next class will be nav bar expand large enough bar now and nav bar link i think this is okay we are talking about this class here so now nerve and then this is not by link all right so let me set by the padding font size so that's it i will just copy this and right here i'll say however and i'll say r2 as well all right okay let me see so now let me style the button this is going to be like this nav bar enough enough button tag i'll give it the pattern of 1.2 re i'm 0 border radius do so so guys that was it concerning the responsive navigation bar using bootstrap version 5. thanks for watching i hope this video was informative please don't forget to like this video and also subscribe to this channel let's meet in the next video

Channel: Coding River

Views: 53,160

Keywords: responsive navbar using bootstrap 5, bootstrap 5, responsive web design, bootstrap tutorial, build a responsive navbar with bootstrap 5, responsive navigation bar bootstrap 5, responsive navbar bootstrap 4, responsive navbar bootstrap, responsive navbar html css, bootstrap 5 responsive navigation bar tutorial, bootstrap 5 responsive website, responsive, website design, responsive website using bootstrap, bootstrap 5 tutorial, responsive navbar bootstrap 5

Id: NTmFHSjRjgU

Length: 13min 36sec (816 seconds)

Published: Wed Aug 19 2020