I am using bootstrap 3.2.0. I have some content in the tabs and I want to create an anchor link to this content in the tabs to different websites. Here is my code:
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li> Sample#1 </h1></li>
<li> Sample#2 </h1></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1A">
<li id="ndf_35"></li>
</div>
<div class="tab-pane" id="2A">
<li id="ndf_36"></li>
</div>
</div>
</div>
</div>
I create the link like this :
some text
But it's not working. Does anyone have an idea how to fix this?
Demo
Its working fine.
Check that
You have included jquery (you need jquery for bootstrap.js)
You have included bootstrap.js
open <h1> tags
Related
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
Using twitter bootstrap, I am trying to create a sidebar in a master-detail UI with the code below. The problem is that the sidebar is always appearing right above the main content or details section as shown in the image below. Any suggestions on fixing this will be helpful. thanks.
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span9 well">
</div>
</div>
</div>
This is the only custom CSS used:
body{padding: 60px 10px 10px 10px;}
Solved
What caused my problem was that, my <div class="container-fluid"> was not wrapped with an outer row class eg <div class="row-fluid">. Once I did that, everything was fine.
Your missing a closing quote here:
<ul class="nav nav-list span3 well pull-right>
Twitter Bootstrap now provides examples, which contain a Master/Detail template. There's no need for pull-right or the the quote hack. Here's adaam's example with the hack removed, working perfectly: http://jsfiddle.net/2Zy6D/
As well as Kevin's fix:
<ul class="nav nav-list span3 well pull-right">
Based on the unknown that you might have other code effecting the width of the divs causing them to sit on top of each other use a lower span number to compensate like this (span numbers must add up to the Bootstrap maximum of 12 i.e. 9 + 3 in your code above [under normal circumstances would work]):
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>
<div class="row-fluid">
<ul class="nav nav-list span3 well pull-right">
<li> Home </li>
<li> Post </li>
</ul>
<div class="span8 well">
</div>
</div>
</div>
Wouldn't usually advise this as it's not strictly correct but as this is just for a backend page it seems it will be O.K. So here's a jsFiddle (bit hacky but oh well): http://jsfiddle.net/7MD6m/
I have a Google Chart that displays fine in its own page /graph/map_freq but is sized down when I display it as a tab content.
Here's the tabbable code:
<div class="tab-pane" id="map_freq">
<%= render "graph/map_freq" %>
</div>
Here's the code in graph/map_freq.html.erb:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I am pretty sure this is related to tabbable component of Bootstrap.
You shall mark it up like so...
<ul class="nav nav-tabs" id="map_freq">
<li class="active"><a data-toggle="tab" href="#featured-members">Your Tab Name</a></li>
</ul>
<div class="tab-content" id="yourId">
<div id="map_freq" class="tab-pane active fade in">
Your Content Here.
</div>
</div>
The code shall output a page similar to THIS ONE.