Bootstrap Tabs and pills

Tabs are created with <ul class="nav nav-tabs">:

Tip: Also mark the current page with <li class="active">.

Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Centered Tabs</h3>
  <ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
  <br>
  <h3>Centered Pills</h3>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>



for brief details goto

Comments

Popular posts from this blog

Script For Login, Logout and View Using PHP, MySQL and Bootstrap

PHP Ajax Login Validation Tutorial

Hyperledger Development with in 10 days — Day 6