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
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 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 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
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
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
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 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
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
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
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
Post a Comment