Header Ads

bootstrap navbar collapse accordion

Bootstrap Collapse

Collapse class is used to show and hide a div on button or link click. To use it, create a button with attributes data-toggle="collapse" and data-target="#div-id". In the case of link, use attribute href="#div-id" instead of data-target.

By default, collapse content is hidden. You can show it by using class .in.

In below example, we create a button linked with a div (by default hidden) and a link linked with a paragraph (by default show).

<div class="row">
    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#divid">Collapsible Button</button>
    <div id="divid" class="collapse">
        <h1>Bootstrap</h1>
        <p>Bootstrap is CSS framework contains built in classes to style elements. It makes the web pages and elements responsive</p>
    </div>
</div>
<div class="row">
    <a class="btn btn-info" data-toggle="collapse" data-target="#pid" >Collapsible Link</a>
    <p id="pid" class="collapse in">Responsive website adjust the size of its web pages according to the underlined screen size</p>
</div>

Output

bootstrap collapse

Collapsible Panels

You can create a panel group having collapsible panels. Here we create only one collapsible panel in the panel group.

<div class="panel-group">
    <div class="panel panel-success">
      <div class="panel-heading">
          <a data-toggle="collapse" href="#collapsiblediv">Collapsible panel</a
      </div>
      <div id="collapsiblediv" class="panel-collapse collapse">
        <div class="panel-body">This is panel body</div>
        <div class="panel-footer">This is panel footer</div>
      </div>
    </div>
  </div>
</div>

Output

bootstrap collapsible panel

Bootstrap Accordion

Accordion contains collapse items such that only one item can be shown at a time. It toggles through the items.

<div class="panel-group" id="accordion">
    <div class="panel panel-success">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">First collapsible</a>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Body of first collapsible group</div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Second collapsible</a>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Body of second collapsiblle group</div>
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Third collapsible</a>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Body of third collapsible group</div>
        </div>
    </div>
</div

Output

bootstrap accordion

Bootstrap Menus

Menu is a series of links of different pages for navigation. Mostly unordered list is used to create menu. To align menu items horizontally, add class .list-inline in unordered list element.

<ul class="list-inline">
    <li><a href="#">Home</a></li>
    <li><a href="#">C++</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">ReactJS</a></li>
</ul>

Output

bootstrap menu

Tabs

Tab is also used for navigation among pages. Bootstrap provides .nav-tabs class to create tab menu.

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Javascript</a></li>
</ul>

Output

bootstrap tabs

Tabs with Dropdown List

You can add dropdown menu with a tab.

<ul class="list-inline">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">CSS</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Javascript
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a href="#">AngularJS</a></li>
        <li><a href="#">ReactJS</a></li>
        <li><a href="#">JQuery</a></li>
        </ul>
    </li>
</ul>

Output

bootstrap tabs with dropdown list

Pills

Pills are another form of tabs. Class .nav-pills is used to create pills.

<ul class="nav nav-pills">
    <li><a href="#">Home</a></li>
    <li  class="active"><a href="#">Digital Marketing</a></li>
    <li><a href="#">SEO</a></li>
    <li><a href="#">Email Marketing</a></li>
</ul>

Output

bootstrap pills

Bootstrap Navbar

Bootstrap Navigation bars is placed at the top of the page as header navigation. Bootstrap provides .navbar class to create navigation bars. We have two types of nav bars: default and inverted.

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Name of Website</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Php</a></li>
        <li class="active"><a href="#">C#</a></li>
        <li><a href="#">Java</a></li>
      </ul>
    </div>
</nav>

Now just change class navbar-default to navbar-inverse.

Output

bootstrap navbars

Navigation bar with Dropdown list

You can add a dropdown list with the top navbar.

<ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Php</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">C#
      <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Window Form Application</a></li>
        <li><a href="#">Console Application</a></li>
        <li><a href="#">MVC</a></li>
      </ul>
    </li>
    <li><a href="#">Java</a></li>
</ul>

Output

navigation bars with dropdown menu

Right Aligned Navbar

You can align a nav bar at the right side of the page.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Name of Website</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Php</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">Java</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Create Account</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </div>
</nav>

Output

right aligned navbar

Navbar Forms

You can add a form inside the navbar by using class .navbar-form.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Name of Website</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">Rust</a></li>
      </ul>
      <form class="navbar-form navbar-right" action="url">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form>
    </div>
</nav>

Output

navbar with form inside



Post a Comment

Previous Post Next Post

In Article Ads 1 Before Post

In Article Ads 2 After Post