Menu
In Twitter bootstrap's starter-template.html, the navbar is written as
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
However, if I change the markup to
<div class="navbar navbar-inner">
<div class="container">
...
</div>
</div>
everything seems to work fine and there's no discernible visual differences as far as I can tell. What's the reason to have separate navbar and navbar-inner classes associated with two divs? Why not just have a navbar class that combines styles of both?
317
The .navbar class sets the position (and has a default display inline) while the navbar-inner class wraps the content of this container (display table). Your .navbar can contain more as one blocks like navbar-inner.
The .navbar class is used to create a navigation bar. The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using .navbar-expand-xl|lg|md|sm class.
The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using .navbar-expand-xl|lg|md|sm class. So, It provides flexibility to the web page.
1 Answer 1. navbar-brand class is applied to typical branding logo you see in the top navigation bar.It may just contain a typical image logo or text. Refer to the image below to better understand. Now coming to the second question. The class applied to Toggle Navigation is sr-only that stands for screen reader only.
It makes the stucture of your html document more clear and readable. The .navbar class sets the position (and has a default display inline) while the navbar-inner class wraps the content of this container (display table). Your .navbar can contain more as one blocks like navbar-inner.
In your hierarchical DOM-structure .navbar has the same level as the .container(fluid) divs:
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
