Skip to content

Instantly share code, notes, and snippets.

@joewright
Created April 16, 2018 21:21
Show Gist options
  • Select an option

  • Save joewright/9f6bdfb0d55d2822367714c06df993e2 to your computer and use it in GitHub Desktop.

Select an option

Save joewright/9f6bdfb0d55d2822367714c06df993e2 to your computer and use it in GitHub Desktop.
Minimal bootstrap tab panes setup
<!DOCTYPE html>
<html>
<head>
<title>Minimal bootstrap tab pane setup</title>
</head>
<style>
.tab-pane {
display: none;
}
.tab-pane.active {
display: inherit;
}
</style>
<body>
<div>
<!-- Nav tabs -->
<div role="tablist">
<h3 role="presentation" role="tab" data-toggle="tab" href="#home">Home</h3>
<h3 role="presentation" role="tab" data-toggle="tab" href="#profile">Profile</h3>
<h3 role="presentation" role="tab" data-toggle="tab" href="#messages">Messages</h3>
<h3 role="presentation" role="tab" data-toggle="tab" href="#settings">Settings</h3>
</div>
<!-- Tab panes -->
<div >
<div role="tabpanel" class="tab-pane active" id="home">home...</div>
<div role="tabpanel" class="tab-pane" id="profile">profile...</div>
<div role="tabpanel" class="tab-pane" id="messages">messages...</div>
<div role="tabpanel" class="tab-pane" id="settings">settings...</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment