D4mations.com

Bootstrap 4 Tutorial in Hindi Part 6 : Bootstrap 4 responsive navbar in Hindi | navbar collapse

[ad_1]
https://i.ytimg.com/vi/eVJWu9_NJes/hqdefault.jpg



welcome Guys, we will see Bootstrap 4 responsive navbar in Hindi and navbar collapse. Basic Navbar With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a ul element with class=”navbar-nav”. Then add li elements with a .nav-item class followed by an element with a .nav-link class:

Very often, especially on small screens, you want to hide the navigation links and replace them with a button that should reveal them when clicked on.

To create a collapsible navigation bar, use a button with class=”navbar-toggle”, data-toggle=”collapse” and data-target=”#thetarget”. Then wrap the navbar content (links, etc) inside a div element with class=”collapse navbar-collapse”, followed by an id that matches the data-target of the button: “thetarget”.

If you like this video plz LIKE SHARE and SUBSCRIBE my THAPATECHNICAL 🙂

Original source

d4mer

,
, , , , , , , , ,

43 responses to “Bootstrap 4 Tutorial in Hindi Part 6 : Bootstrap 4 responsive navbar in Hindi | navbar collapse”

  10. Osm video sir ..but expand sm main hoga tavi button dekhega ur tabhi hum click karenge ur tabhi to hum div k aandar jayenge ..jo collapse wala hai to pahele hamara nav main data jo nav link hai oh kahan dekhenge

  28. Navigation mai bus links diya hai maine and maine uspr padding diya hai left-right se 28px taaki wo sab perfectly cover and aligned ho jaaye. But jb responsive check krta hu medium device mai to content/links baahr aa rhe hai. Please help.

Leave a Reply