1.

Navbar - Bootstrap

Answer»

  • The navigation bar is a header that appears at the top of the page.

  • The .navbar should be wrapped in .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
navbar A header is placed at the top of a webpage to navigate to different elements. <ul class="navbar-nav">
navbar-brand Navbar-brand is used to highlight a brand, main project or logo of the page. <a class="navbar-brand" href="#">InterviewBit</a>
navbar with form navbar with form is used to add form controls in a navigation bar at the top of the webpage. <nav class="navbar navbar-expand-md bg-primary navbar-dark"> <form class="form-inline">
navbar-text For navbar text. <span class="navbar-text">
navbar-dark bg-dark Used to add navigation bar with the dark background; Primary, secondary, success, light, warning, danger, and info are other possibilities. <nav class="navbar navbar-dark bg-dark">
navbar-light Used to add navigation bar with light background. <nav class="navbar navbar-light"></nav>
navbar fixed-topnavbar fixed-top fixes navbar at the top. <nav class="navbar fixed-top navbar-dark">
navbar fixed-bottomFixes navbar at the bottom. <nav class="navbar fixed-bottom navbar-light">
navbar sticky-topNavbar sticks to the top of the page when scrolled over. <nav class="navbar sticky-top navbar-light">
collapse navbar-collapsecollapse navbar-collapse collapse navigation bars. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
navbar-togglerNavbar-toggler is used to add expand/collapse functionality to the navbar. <button class="navbar-toggler" type="button"


Discussion

No Comment Found

Related InterviewSolutions